Wrap the content of a flex column around another flex column - html

I'd like the CONTENT flex column to wrap around the left-hand rowChild592 column.
I have this:
I'd like it to look something like this:
I saw an answer here about making a div set to a table cell wrap around:
Wrapping table content around a floating div across multiple rows
Would I have to redo all of this with a table, or is it possible to wrap a flex column around another?
.rowParent,
.columnParent {
display: flex;
}
.columnParent {
flex-direction: column;
}
.flexChild {
flex: 1;
}
#flexymenu {
flex-grow: 2;
height: 100%;
}
.frame {
display: block;
margin: 0 auto;
}
.socialwrap {
display: flex;
}
<div id="container" class="flexChild rowParent">
<div id="rowChild592" class="flexChild">
<h1></h1>
<div class="socialwrap"></div>
</div>
<div id="flexymenu" class="flexChild columnParent">
<div id="columnChild85412" class="flexChild rowParent">
<div id="rowChild97758" class="flexChild"></div>
<div id="rowChild52237" class="flexChild"></div>
</div>
<div id="columnChild59385" class="flexChild selected">
<div class="frame">CONTENT</div>
</div>
</div>
</div>

In flex layout, elements can be aligned along columns or rows. A flex item cannot span between both columns and rows, which could allow the content of one item to wrap around another item. So, flexbox is not a good option for achieving your layout. Read more.
In grid layout, elements can span across columns and rows. A grid item can be configured to take up as many rows and columns as desired, which would allow for the content of one item to wrap around other items, except for one limitation currently in place: The grid area must be rectangular.
This behavior is defined in two parts of the spec.
9. Placing Grid
Items
Every grid item has a grid area, a rectangular set of grid cells that
the grid item occupies.
7.3. Named Areas: the grid-template-areas
property
If a named grid area spans multiple grid cells, but those cells do not
form a single filled-in rectangle, the declaration is invalid.
Note: Non-rectangular or disconnected regions may be permitted in a
future version of this module.
So, for the foreseeable future, tetris-shaped grid areas are not possible, which would make your layout simple and easy.
To wrap your text around images, stick to the good ol' float property. After all, this is exactly what it was designed to do.
And if you're thinking about using float inside a flex or grid container, it won't work. Floats are ignored in both a flex formatting context and grid formatting context.

Related

How to make text go on top of each other?

this is text that overlaps itself
I am currently trying to use a flex box with columns made the height of the first column 100% so that it would force the other two boxes to be on top of each other. In the first box I typed artistry by and in the second and third I’m trying to align the text so that they can have LE and XI directly over each other. Any advice here would help.
Can you post your code? You may be missing some containers so you can have better control. I haven't tested this, but this example might guide you.
HTML:
<div class="logoContainer">
<h1> artistry by </h1>
<div class="rightSideOfLogo">
<h1>LE</h1>
<h1>XI</h1>
</div>
</div>
CSS:
.logoContainer {
display: flex,
flex-direction: row
}
.rightSideOfLogo {
display: flex,
flex-direction: column
}

How do i move one sub div from another div and put beside it?

We have product page like [advertising link removed]. How do i move below part as shown in 1st image to beside the main div.
There are a number of ways to move one div next to another div. One way of doing it would be to include the two divs into one bigger div (container) and use flex in this bigger div (with flex-direction set to row).
This way you can have both elements next to each other.
Example:
HTML:
<div class="makeThisFlex">
<div id="main"></div>
<div id="addToCart"></div>
</div>
CSS:
.makeThisFlex{
display: flex;
flex-direction: row;
}
I hope this answers your question.

Distribute DIV children evenly over entire height and width of container

I have an empty div and I create other divs in it with javascript. I've set up my CSS so it will create a grid. My question is: how can I dynamically resize the divs so they evenly fill their container?
I tried to illustrate it better with a drawing but my drawing skills aren't that good. Hopefully you will understand what I want.
The black square is the parent div and the red squares are the children. When I create one div it should fill the parent div (with a little margin).
With two divs it will split the parent in half.
With 3 it will behave like you see in the upper right corner of the image, and so on for the others.
How could I accomplish this with CSS?
Some more info:
This is a game I have to make for school. This is a previous version but you get the idea of having squares in a div. Now the next task is to let the user chose how many squares they want to play with. But that has to be dynamic and they have to be able to choose numbers like 5 or 8. Not just 4, 9, 16, 25 etc. that's too easy.
https://luukwuijster.io/school/csp/kleurenspel/
This type of layout can be achieved using CSS Flexbox.
First turn your wrapping element into a flexbox by adding display:flex. Next add flex:1 1 auto to your boxes to allow them to grow and shrink as needed to fill the space.
To keep your boxes from being squished into one line by flexbox, set a min-width value on them. I've used min-width:30% but this number can be changed to suit your needs. 30% will mean that the maximum number of boxes in a row at any time is 3 (as it is just below 1/3 or 33% of the container's width).
Try adding or removing boxes from the example code below.
#wrapper {
display:flex;
flex-wrap:wrap;
width:400px;
height:400px;
}
.box {
background-color:white;
border:1px solid black;
min-width:30%;
flex:1 1 auto;
}
<div id='wrapper'>
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>
</div>

Flexbox difficulties aligning icons to bottom of container

I'm having some difficulties with flexbox. As you can see, I have an aside element that holds an ordered list of social media icons. For some reason, I'm unable to make these icons stick to the BOTTOM on the containing div.
HTML CODE
<div class="outercontainer group">
<div class="dividing-row span_1_of_2 col">
<p> here is some text </p>
<aside>
<ol class="category-name">
<li><i class="fa fa-pinterest-p"></i></a></li>
<li><i class="fa fa-flickr"></i></a></li>
</ol>
</aside>
</div>
</div>
CSS CODE
.outercontainer // this keeps all containers the same height in fluid design
{
display: flex;
flex-wrap: wrap;
}
ol.category-name
{
display: inline-block;
color: #FFF;
align-self: flex-end!important; // this does not work
}
Can anyone help? am I missing the obvious?
Many thanks,
p
Here are a few things to consider:
When you create a flex container only the child elements become flex items. Any descendant elements beyond the children are not flex items and flex properties don't apply to them.
If you want to apply flex properties to the children of flex items, you need to make the flex item a flex container, as well. In other words, you need to create nested flex containers.
You haven't specified any heights for your containers. So the height of each container is based on the height of the content. If the content is a single row, you really don't have much height.
So in your HTML structure, the flex container is...
<div class="outercontainer group">
and the only flex item is...
<div class="dividing-row span_1_of_2 col">
The <p>, <aside>, <ol> and <li> are regular block elements. Flex properties don't apply.
If you want to use flex properties to align the social media icons at the bottom of the container, you need to make the parent a flex container and give it a height.
Here's a demo with more details: http://jsfiddle.net/f1qnjwd3/1/
Couple of more notes:
In your ordered list, you're missing an opening <a> tag.
In my demo, the heights are for demo purposes only. They may not align perfectly because I wasn't trying to create a perfect layout, just an illustration of how this answer works.

How to force division into equal parts using flexbox

In a dom structure like this:
<div id="1">
<div id="2">
<div id="3">
</div>
</div>
<div id="4">
<div id="5">
</div>
</div>
</div>
with css specified as:
#1{
display: flex;
flex-direction: row;
}
#2, #4{
flex: 1;
}
The divs with id 2 and 4 will be evenly distributed as long as the sum of the width of the contents in id 3 and 5 does not exceed the width of the dom with id 1.
When the sum exceeds the width, they are not evenly distributed, and one with wider content will take up more width. How can I force 2 and 4 to take up even width using flexbox even in such cases?
I do not want to use width specification by percent. I want to stick to flexbox.
If you want elements to grow or shrink independently to it's content, specify zero flex basis:
flex-basis: 0;
However, my demo incorrectly works in Chrome: large image stretches it's parent container no matter that zero basis has been set. As a workaround, maximum width can be set:
img {
max-width: 100%;
height: auto;
}
To force the equal distribution, you have to add width: 0 to all flex items. This came to my mind after reading Manuel Matuzovic's article, which has a very good in-depth conclusion how flex-grow works.
https://css-tricks.com/flex-grow-is-weird/