Are Flex Items Block Level Element

Block elements only inside flex item?

You have set display: flex on both section as well as div.

If section acts as a container, you give display: flex to the section and leave the div as flex-items. Then the ps and h1s will float.

Fiddle: http://jsfiddle.net/abhitalks/zb12n2dk/

.fill-height-or-more {
    display: flex;
    flex-direction: column;
    ...
}
.fill-height-or-more > div {
    flex: 1;
    ...
}
.some-area > div p {
    width: 40%;
    float: left;
    ...
}

How to keep flex children as inline elements?

just add span to your text and style to it

div {
  display: inline-flex;
  width: 100px;
  padding: 20px;
  background-color: #ddd;
}
span {
  padding-bottom: 5px;
  border-bottom: 2px solid rgba(255, 0, 255, 0.5);
  line-height: 30px;
}
a {
  text-decoration: none;
}

<div>
  <a href="#"><span>StackOverflow is awesome</span></a>
</div>

Usage of display property of flex box items

From the specifciation:

The display value of a flex item is blockified: if the specified display of an in-flow child of an element generating a flex container is an inline-level value, it computes to its block-level equivalent. (See CSS2.1§9.7 [CSS21] and CSS Display [CSS3-DISPLAY] for details on this type of display value conversion.)

So basically, setting inline-block or block will do nothing as both will get computed to block but you can set table or inline-table and your flex item will behave as a table. Same thing if you set inline-grid or grid

.box {  display: flex;  margin:5px;}
.box>div {  height: 50px;  width: 100%;  background: red;  display: grid;  grid-template-columns: 200px 1fr;  grid-template-rows: 1fr;  grid-gap: 20px;}
span {  border: 2px solid green;}

<div class="box">  <div>    <span></span>
    <span></span>  </div></div>
<div class="box">  <div style="display:inline-grid;">    <span></span>
    <span></span>  </div></div>

Why doesn't the Flex container care about its parent Block level element?

You should give height:100%; to .flex-container-1

:root {  box-sizing: border-box;}
*, *::before, *::after {  box-sizing: inherit;}
.header {  background: orchid;  height: 100px;}
.flex-container-1 {  display: flex;  align-items: center;  height:100%;}

<header class="header">    <div class="flex-container-1">      Flex Container 1    </div></header>

Are Flex Items Block Level Element

Block elements only inside flex item?

How to keep flex children as inline elements?

Usage of display property of flex box items

Why doesn't the Flex container care about its parent Block level element?

Related Topics

Leave a reply