Prevent Flex Items from Rendering Side to Side

Prevent flex items from rendering side to side

Add this style:

.inner {
flex-direction: column;
}

That tells the flexbox to display its children in rows instead of columns. (I know, weird, right?)

Updated Snippet:

.container {  height: 200px;  width: 200px;  background: cornflowerblue;  position: relative;}
.inner { height: 100%; position: absolute; left: 0; width: 100%; top: 0; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; flex-direction: column;}
.square { width: 30px; height: 30px; background: tomato; display: block;}
<div class="container">  <div class="inner">    <div class="square"></div>
<p>some text</p> </div></div>

How to prevent flex-items from overflowing flex parent with no wrap?

Set display: inline-flex on the .parent class to change it to an inline element. This will also force the .parent to expand to contain its children. Then by setting min-width: 100% on the .parent class, it will force it to expand to 100% of the containing element.

.parent {
display: inline-flex;
flex-direction: row;
background-color: red;
min-width: 100%;
}
.child {
min-width: 100px;
flex-basis: 0px;
flex-grow: 1;

margin: 5px;
height: 100px;
background-color: blue;
}

CSS Flex Stacking Items on Top of Each Other

You're using position: absolute on the h1 which removes it from the flow of the page, and positions it relative to it's closest positioned parent. So other elements won't flow around it. Remove that. Then your items will display side-by-side since the default flex-direction for a flex parent is row. To display the items vertically, use flex-direction: column and the items will stack on top of one another in a column instead of side-by-side in a row.

.top-section {  height: 350px;  background-color: #04041b;  align-items: center;  display: flex;  justify-content: center;  flex-direction: column;}
.top-h1 { color: #E8E8E8; font-size: 60px;}
.email-form { color: white; font-size: 30px;}
<div class="top-section">
<h1 class="top-h1"> mytitle </h1>
<md-input-container class="email-form" color="accent"> <input mdInput placeholder="Email us" value="Your email address"> </md-input-container>
</div>

align flexbox items side-by-side (Aligning Problem)

Adding display:flex style to an HTML element by default make its children appear side by side unless you explicitly add flex-direction: column;.

After Looking at your html carefully I see that you have added display:flex to head_flex_container which has only one child i.e head_titel_container.

You could add display:flex property to head_titel_container because it has two children that needs to appear side by side.

<div class="head_titel_container">
<div class="flex_logo"><img src="pictures/Logo.jpeg" alt="Logo" title="El Pastelazo" id="logo"></div>
<div class="flex_titel"><h1>El Pastelazo</h1></div>
</div>
.head_titel_container {
display: flex;
}

Adding display: flex style to .head_titel_container in your css file should make them appear side by side.

Let me know if you have any problems with this approach.

Stack flex items on top of each other

Add flex-direction: column to place flex items in column. Note that align-items will center flex items horizontally in this case. To move elements to the center of flex container use justify-content: center.

.hover-over-windows-style {  height: 100%;  background: red;  /* Fails because h3 and p tags are not on separate lines */  display: flex;  /* place flex items in column */  flex-direction: column;  /* move elements to the center of flex center */  justify-content: center;  /* padding-top of 25% nearly works but content isnt in centre of parent div */}
#parent { height: 300px; width: 300px;}
<div id="parent">  <div class="hover-over-windows-style">    <h3><a href="matches/blitz.html">H3 Tag on top</a></h3>    <p>Paragraph here should be below the H3 tag, on a separate line. Not sure how to get this done. Setting 100% widths don't work and cannot display as block elements.</p>  </div></div>

Better way to set distance between flexbox items

  • Flexbox doesn't have collapsing margins.
  • Flexbox doesn't have anything akin to border-spacing for tables (edit: CSS property gap fulfills this role in newer browsers, Can I use)

Therefore achieving what you are asking for is a bit more difficult.

In my experience, the "cleanest" way that doesn't use :first-child/:last-child and works without any modification on flex-wrap:wrap is to set padding:5px on the container and margin:5px on the children. That will produce a 10px gap between each child and between each child and their parent.

Demo

.upper {
margin: 30px;
display: flex;
flex-direction: row;
width: 300px;
height: 80px;
border: 1px red solid;

padding: 5px; /* this */
}

.upper > div {
flex: 1 1 auto;
border: 1px red solid;
text-align: center;

margin: 5px; /* and that, will result in a 10px gap */
}

.upper.mc /* multicol test */ {
flex-direction: column;
flex-wrap: wrap;
width: 200px;
height: 200px;
}
<div class="upper">
<div>aaa<br/>aaa</div>
<div>aaa</div>
<div>aaa<br/>aaa</div>
<div>aaa<br/>aaa<br/>aaa</div>
<div>aaa</div>
<div>aaa</div>
</div>

<div class="upper mc">
<div>aaa<br/>aaa</div>
<div>aaa</div>
<div>aaa<br/>aaa</div>
<div>aaa<br/>aaa<br/>aaa</div>
<div>aaa</div>
<div>aaa</div>
</div>

Stacking flex items on top of each other

NOTE: This question asks about stacking flex items along the z-axis. If you came here looking for "Stacking flex items on top of each other" along the y-axis, see this post instead: prevent flex items from rendering side to side.


Flexbox is designed to align elements along columns or rows. It is not designed for stacking.

CSS Grid, however, is perfect for this sort of thing.

A CSS alternative to Grid would be absolute positioning:

(Note that when a flex item is absolutely positioned, it no longer accepts most flex properties.)

article {  display: flex;  height: 100vh;  position: relative;}
section:nth-child(1) { flex: 1; background-color: turquoise;}
section:nth-child(2) { position: absolute; top: 50px; left: 50px; right: 0; bottom: 0; background-color: salmon;}
section:nth-child(3) { position: absolute; top: 100px; left: 250px; right: 0; bottom: 0; background-color: thistle;}
body { margin: 0;}
<article>  <section></section>  <section></section>  <section></section></article>

flexbox | flex item being pushed out of containing div (off screen)

Really, you only want the text content to have a flexible width (the time and the icon should have a fixed width and not shrink). This could be pretty easily accomplished with tables, absolute positioning, or flexbox.

Here's the flexbox that you need to know:

.task-time: flex: 1 0 4em
.task-one-line i.fa { flex: 0 0 auto; }

ul {      margin:0;      padding: 0;    }    #tasklist{      width: 100%;    }          .task-one-line i.fa { flex: 0 0 auto; }      .task-one-line{        display: flex;        flex-direction:row;        flex-wrap: nowrap;        justify-content: space-between;        align-item: baseline; /*flex-end*/        display: -webkit-flex;        -webkit-flex-direction:row;        -webkit-flex-wrap: nowrap;        -webkit-justify-content: space-between;        -webkit-align-item: baseline;         border-bottom: 1px solid #d3d3d3;        width: 100%;      }            .task-one-line i{          width:1.5em;          padding: 0.5em 0.3em 0.5em 0.3em;          /*border: 1px solid green;*/        }              span.task-desc{            flex-grow: 5;            -webkit-flex-grow: 5;            text-align:left;            padding: 0.3em 0.4em 0.3em 0.4em;            /*border: 1px solid red;*/          }                   span.task-time{            flex: 1 0 4em;            -webkit-flex: 1 0 4em;            text-align:right;            padding: 0.3em 0.5em 0.3em 0.5em;            /*border: 1px solid blue  ;*/          }
<ul id="tasklist">        <li class="task-one-line">            <i class="fa fa-check-circle-o"></i>            <span class="task-desc">And a short one</span>            <span class="task-time">00:01</span>        </li>        <li class="task-one-line">            <i class="fa fa-check-circle-o"></i>            <span class="task-desc">Here's a super long long long long long long description that might wrap onto another line  long long long long long long description that might wrap onto another line</span>            <span class="task-time">00:08</span>        </li>    </ul>


Related Topics



Leave a reply



Submit