Braniac

Question

Flexbox - run-around

Forum|Forum|8 years ago
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.

pziecina

Braniac

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

Braniac

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.

Rob Hecker2

Braniac

As no one has answered, i'm taking it that no one wants to make a judgement call, so i'll explain why i am asking. You will have to bear with me as this will be an as i think of it post.

The reason i am interested is that back in the 80's programming started to introduce drag-and-drop programming interfaces, and quick and dirty configurable programming solutions, (sound farmiliar?). After a few years they started to disapear, as people found they did not work as expected, (about 10 years actually). The reason they were introduced in the first place was naturally to keep development costs down, (or should that be 'maximize profits'), and match the increased demand, as desktops became more proliferant not just in the work place, but also stared to appear in private homes.

Then we had the dot comm boom, when programs like Dw tried, (with some success) to automate table based layouts building, but users of such programs still wanted to be paid the same as before, (lots), naturally sooner or later those paying found that what was being offered did not match what they were told. Then naturally came the dot com crash. Although many left web development, (one way or another) many also survived and changed their ways of working, often competing in a race to the bottom cost wise.

Both the above examples has occured across almost every proffession at some point in history, and often those who did not 'play the game' either moved to a different clientele, (up-market if possible, but more often not), dropped their prices and way of working to match, or went bust.

Open source solutions, (cms's frameworks) and programs that use a visual interface, (eg Muse) are the equivalent of the drag and drop and configurable solutions. Extensions are also part of that configurable solution idea.

If history repeats itself, and it often does. Then at some point those buying the sites we build will be told by their children/grand-childeren that they are paying too much, which i think is starting to happen.

The auto repair industry, also went through a similar situation, but its eventual solution was not to repair components, but replace them. Thus cutting down on the man hours for the repair, which did not reduce the repair bill, as one had either to pay for a new part, or a refurbished part, which often cost more than the repair time would have for the old part. Now that i think was an interesting solution, as the custommer did not blame the person doing the repair for the increased cost, they blamed the company producing the parts involved.

Now let us suppose, (because those children don't know everything) that if we could think of extensions as those replacement parts, (the refurbished parts), and new parts as the custom built solutions. Then the person using an extension would be the equivalent of a mechanic who fits the parts together, and the one coding the custom coded solution would be the fitter who can also repair and fit the parts, (but does not have to).

Let's also consider the auto industrys solution, in that they also started to offer different grades of new car/autos, ranging from low to luxury brands. With those costing more not necessarily offering more in features, but more in quality.

Compare object oriented programming to extensions. OO frameworks and libraries provide complex solutions to common programming tasks that give the coder vast control, opposed to the limitations of extensions. You still have to know how to code, of course.

For example, I use Swiftmailer (a class in Symfony) for all emails sent from PHP. It gives me the power of SMTP, HTML email and email attachments without my having to understand the underlying code, yet I can use my PHP knowledge to control and extend what the library does. And most OO libraries play very nicely with whatever your own coding style and application structure is.

I did not code in the 70's, but some of my friends coded languages like assembly, fortran and C. I had one friend whose whole career was spent coding assembly. Paula, I know you know what I'm saying, but for those who don't, coding those languages is not fun, it's not fast. It's agonizing and there are no nice wizards, extensions, libraries or anything else to make the job less horrendous. You can't quickly get a visual check of your work but have to work for hours or days before you can even test, and then finding bugs can be very difficult because the system doesn't provide nice error messages or even highlight the line where the problem is.

So now it is cushy, fun and fast to code PHP, Java, or C#. Paula, I see the various frameworks and libraries as providing the "replacement parts," not extensions. For instance, if I decided to use ZendMail instead of Swiftmailer, I think I could make the switch in a day.

pziecina

Braniac

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

Braniac

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>

<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>

</figure>

<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>

</div>

</div>

</body>

</html>

pziecina

Braniac

Sorry Os, but you have lost me. All i am seeing is 2 columns l/h yellow, r/h with text.

Correct me if i am wrong on this, (and don't forget, i am only working from an ipad) you want the yellow box to fill both columns at 760px, be a height of 250px then the text to continue under the box?

If so then what you are after is css regions, (there is a polyfill). With regions, (and it does work with flexbox) you tell the text how to flow, (from box to box, so to speak). IE uses an iframe for the content that will flow into the boxes, but there is also a polyfill to have it work without the iframe.

If you want a demo, and can wait until Wednesday, (when i get back home) I am almost certain i did one a few years back for someone, (no prizes for guessing who). Regions was a simple way of telling text, (and other content) how to flow into various regions of a page.

A simple explanation is at -

https://msdn.microsoft.com/en-gb/library/hh673537.aspx

Just a bit of background history for those interested, css regions was implemented in Chrome, and is the only spec i have ever seen removed from a browser support. It was also an Adobe created spec, and its removal was the start of Adobe loosing interest in html5 and css3.

Just as a quick update to the final comment.

Safari, IE10+ and Edge do support css regions, but the removal from Chrome, started one of the worst 'temper tantrums' i have ever seen, (read about) between 2 major companies.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded