Skip to main content
O
osgood_
Brainiac
May 26, 2017
Question

Flexbox - run-around

  • May 26, 2017
  • 2 replies
  • 10284 views

Does anyone know if a Flex column can run-around another Flex column?

For example: I have 2 columns set as 50% wide each in a Flex parent container. At a specific break point I set the 2nd column, which contains a background image, to 300px high.

What I want to happen is for the 1st Flex column, which contains text, to runaround (under the image) to fill up the width of the parent Flex container.

I can do this conventionally using float/block at the break point but as I'm using Flexbox it would be good to find a Flexbox only solution, maybe it's not Flexible enough to wander outside of a column structure?

Os

    This topic has been closed for replies.

    2 replies

    pziecina
    pziecina
    Brainiac
    June 16, 2017

    O/K,

    This is a serious question. I normaly describe myself as a front-end developer, i am not an expert by any meens, but i do know how to code and just as importantly how to read and apply correctly most of the w3c specs concerning html5, css and the javascript api's. I would however have to refer to them for specifics in a number of use cases in order to ensure what i am doing is correct, for those i do not use on a regular basis.

    I do not consider myself more than a beginner in php anymore as i have not even looked at php for over 4years, but i can follow Rob's example code, and i do know what is happening in the code. In my work i have to use C#, (also why i must use VS) but i would classify myself as advanced beginner, (not even intermediate) in C#. I can connect to mysql, mssql and oracle batabases and write the procedures and transactions necessary in order to test what i am doing, (or have done) on the front-end.

    If necessary i am certain that a small e-comm site in C# is not beyond my capabilities, including coding the necessary security into the application.

    Now if i was to use extensions for php on the back-end in Dw, i would be able to produce a small e-comm site, providing i did not have to modify the code.

    The question is, would i be considered a web-developer for the front and back end, for both php and C#, and just as importantly would clients think so, as i often get the answer, (on this forum concerning layout css) that clients are not interested in my skills, providing the site looks good and works correctly.

    If clients are only interested in the finished product, then surely the same criteria should apply to back-end, as to front-end, and how i do it is not important?

    Note - JavaScript connects the front to back end, in many cases these days, so security is just as important on the front end as the back.

    O
    osgood_Author
    Brainiac
    June 16, 2017

    pziecina  wrote

    Now if i was to use extensions for php on the back-end in Dw, i would be able to produce a small e-comm site, providing i did not have to modify the code.

    The question is, would i be considered a web-developer for the front and back end, for both php and C#, and just as importantly would clients think so, as i often get the answer, (on this forum concerning layout css) that clients are not interested in my skills, providing the site looks good and works correctly.

    It really depends what results you require and more importantly what you expect of yourself. I get involved only with projects I know I can do - ie code completely myself, without having to resort to outside help, frameworks or extensions. Although I'm never 100% satisified with the results I feel I am mostly completely in control of what I produce and if needs be can adjust the coding to meet with the requirements of my clients demands. I think I would class myself as a web developer, at what level is debatable but I'm constantly learning and trying to improve my skills through understanding what the code does. This allows me to imagine something and do it or at least have a damn good go rather than just accepting the limitations of extensions or the clumsy coding of a lot of frameworks.

    I could stand at a machine clicking switches and knock out 50 pairs of cheap shoes a day or I could hand-craft one pair of expensive shoes. I have much more respect and affiliation for/to the craftman rather than the 'robot', but that's just me. I'm not a craftsman but I have great admiration for those that are because I will never achieve that status. Someone who doesnt have the same desire to get better at what they do will have a totally opposing view.

    pziecina  wrote

    If clients are only interested in the finished product, then surely the same criteria should apply to back-end, as to front-end, and how i do it is not important?

    Its about having pride in your own work and representing your chosen career as much as anything else. I'm only interested in what's inside the bottle but the bottle maker is probably more interested in the bottle.

    pziecina
    pziecina
    Brainiac
    June 16, 2017

    Maybe i am being a devils advocate, but i can see yours and Robs view and also Bens view.

    And yes i do understand job satisfaction and pride in ones work, (next time you fly, or an aircraft passes overhead, you had better hope so, as one never knows if i had anything to do with that aircraft ).

    What i cannot see is why, if the method Ben uses of using extensions works for him, and the design looks good, and functions correctly, it would be wrong for him to use extensions, providing the code they produce works fault free and matches the required standards, (lets leave job satisfaction out of this for now). If both yourself and Rob think that it is unaceptable to develop the back end of a site using extensions, then surerly that is to Bens disadvantage, and would be for self coders like yourself and Rob an advantage when it came to selling your work to clients.

    On the front-end -

    Most people who call themselves developers think in boxes when it comes to layout, as do many who call themselves designers. The same person will then look at a well designed and layed-out book, but never even attempt creating such a layout for the web, they will then also completely forget that coding has design and style, both of which no matter what one thinks PVII extensions they do produce, and are infinitly better than a lot of what one sees posted in this and other forums.

    I think it is wrong to rely on extensions, and not know what the code they produce is doing or how it works, but providing they are not a crutch and the code they produce is no worse than the avarage none extension coders code i have seen produced for the front-end, why not use them. Admitedly i prefer to write my own code, and think it is much more concise and satisfying to do so, but making a living does not exactly feature high in my list.

    Maybe i am just complaining about the lack of thought that goes into the front-end these days!

    pziecina
    pziecina
    Brainiac
    May 26, 2017

    Not 100% certain what you are asking, but you can nest a Flexbox layout within a Flexbox layout.

    Or are you wishing to do something like the use of css exclussions?

    https://msdn.microsoft.com/library/hh673558(v=vs.85).aspx

    If css exclussions, it is only currently implemented in IE10+, but you can simulate it using css shapes, (firefox and IE require pollyfil for shapes, though in development).

    You can also simulate exclussions, depending on layout by using multi-column with the break-before/after property, webkit uses a none standard break property in older browsers/devices.

    O
    osgood_Author
    Brainiac
    May 26, 2017

    This is what I'm trying to do. Yellow box on left goes to the right at 768px and the height is set at 250px. I want the text to runaround/below the yellow box to fill the width of the parent container. I don't think Flexbox can do this.

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="UTF-8"/>

    <title>Profiles</title>

    <style>

    * {

    box-sizing: border-box;

    }

    body {

    font-size: 15px;

    line-height: 28px;

    font-family: helvetica, sans-serif;

    }

    .profile-wrapper {

    display: flex;

    justify-content: space-between;

    background-color: #FBF9FA;

    }

    @media screen and (max-width: 768px) {

    .profile-wrapper {

    padding: 30px;

    }

    }

    figure {

    margin: 0;

    padding: 0;

    width: 50%;

    /* background-image: url(images/profile_1.jpeg);*/

    background-size: cover;

    background-position: center, center;

    background-color: yellow;

    }

    @media screen and (max-width: 768px) {

    figure {

    order: 2;

    height: 250px;

    width: 250px;

    }

    }

    .profile {

    width: 50%;

    padding: 40px 50px;

    }

    @media screen and (max-width: 768px) {

    .profile {

    padding: 0;

    }

    }

    .profile h2 {

    margin: 0;

    padding: 0;

    }

    </style>

    </head>

    <body>

    <div class="profile-wrapper">

    <figure>

    </figure>

    <div class="profile">

    <div class="profile-text">

    <h2>Lorem ipsum dolor.</h2>

    <h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aperiam corporis.</h4>

    <p>

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium amet animi atque facere incidunt ipsam laudantium maxime modi recusandae repellendus. Cupiditate deserunt eaque inventore, ipsum iure laboriosam officiis perspiciatis voluptates. A accusantium ad beatae corporis, ducimus enim eos error ipsam iusto laboriosam laborum laudantium libero quaerat repudiandae rerum tempore velit veniam veritatis. Aut commodi ea eos molestiae quidem repellendus repudiandae!

    </p>

    <p>

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. In, ut vero. A ab accusantium aspernatur beatae commodi culpa deleniti dolorem dolores dolorum ducimus eos error esse, fugiat hic itaque labore libero magni necessitatibus nobis odit perferendis perspiciatis praesentium provident quaerat quam, qui quibusdam ratione, reiciendis rem sed sit soluta tempore tenetur voluptas voluptate voluptates voluptatibus? Atque autem commodi consectetur consequatur ducimus explicabo, iste magnam minima non quibusdam quidem quo sint sunt. Dignissimos doloribus libero porro saepe tempora veniam veritatis vitae.

    </p>

    <p>

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. In, ut vero. A ab accusantium aspernatur beatae commodi culpa deleniti dolorem dolores dolorum ducimus eos error esse, fugiat hic itaque labore libero magni necessitatibus nobis odit perferendis perspiciatis praesentium provident quaerat quam, qui quibusdam ratione, reiciendis rem sed sit soluta tempore tenetur voluptas voluptate voluptates voluptatibus? Atque autem commodi consectetur consequatur ducimus explicabo, iste magnam minima non quibusdam quidem quo sint sunt. Dignissimos doloribus libero porro saepe tempora veniam veritatis vitae.

    </p>

    <p>

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus architecto aspernatur dolore, eius eligendi eveniet laboriosam nemo pariatur praesentium rem? Ad dolorum ipsum quibusdam repellendus vel voluptas! Eum, fuga reiciendis!

    </p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto commodi, doloribus esse et facere inventore laborum modi nam, nihil quam repellat, tempore ut voluptate.</p>

    </div>

    <!-- end profile-text -->

    </div>

    <!-- end profile -->

    </div>

    <!-- end profile-wrapper -->

    </body>

    </html>

    pziecina
    pziecina
    Brainiac
    May 26, 2017

    pziecina  wrote

    Here is something for you that shows how regions works, and yes it can also be done with flexbox -

    https://rachelandrew.co.uk/archives/2016/03/25/css-grid-and-css-regions/

    Humm........ ok I'll drill down into it a bit more tomorrow. Its just something I came upon accidentally as I don't often include text-wrap arounds in many of my projects, for some reason. As I'm now incorporating Flexbox when ever I can obviously it would be nice to achieve such an effect using that workflow.

    Happy days!


    Just remember what i keep trying to tell web developers, if you can do it in a magazine layout, or using inDesign, you can if you know what to use, and are willing to use polyfills, do it for the web now.

    Mind you, not many people listen or want to listen, especially those using a certain framework.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices