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 propertygap
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
Using "Margin: 0 Auto;" in Internet Explorer 8
How to Make My Flexbox Layout Take 100% Vertical Space
Example of Multipart/Form-Data
How to Get Folder Directory from HTML Input Type "File" or Any Other Way
Google Fonts Are Not Rendering on Google Chrome
How to Support Placeholder Attribute in Ie8 and 9
Angular 5 Formgroup Reset Doesn't Reset Validators
Html 5 Geo Location Prompt in Chrome
Maintain Image Aspect Ratio When Changing Height
Why Would a Developer Place a Forward Slash At the Start of Each Relative Path
In Indexeddb, How to Make a Sorted Compound Query
Using CSS :Before and :After Pseudo-Elements With Inline Css
Displaying Unicode Symbols in Html
How to Set Date Format in HTML Date Input Tag
How to Close ≪Img≫ Tag Properly
Youtube Autoplay Not Working on Mobile Devices With Embedded Html5 Player
Difference in Applying CSS to Html, Body, and the Universal Selector *