Inline-flex - IORELYS

Inline-flex + section on 'flow-root'

column_master100|flex0|block

• section class="flex01 + h_align_t_50" (display:inline-flex; border:2px dotted teal; min-height:110px; min-width:95%;)(position:relative; left:50%; transform:translate(-50%,0);)
• div class="v_align pw5" style="height:70%; width:90%; margin:auto;""
• div class="v_align pw6" style="width:90%; border:2px solid dodgerblue; margin:auto; padding:20px 20px 30px; background:white; text-align:center; border-radius:7px;"
‹code›‹txt1›Overlay‹/txt1› hr/ hr_10 position:relative; top:50%; transform:translate(0,-50%);‹/code›

flex01

Overlay

position:relative; top:50%; transform:translate(0,-50%);

• section class="flex01 + h_align_t_50" (display:inline-flex; border:2px dotted teal; min-height:110px; min-width:95%;)(position:relative; left:50%; transform:translate(-50%,0);) 
• div class="v_align" style="height:70%; width:90%; margin:auto;""
• div class="v_align" style="width:90%; border:2px solid dodgerblue; margin:auto; padding:20px 20px 30px; background:white; text-align:center; border-radius:7px;"
# ‹code›‹txt1›Overlay‹/txt1› position:relative; top:50%; transform:translate(0,-50%);‹/code›

flex01

Overlay position:relative; top:50%; transform:translate(0,-50%);

flex1 (no min-width)

Overlay position:relative; top:50%; transform:translate(0,-50%);

.flex01 {display:inline-flex; min-height:90px; min-width:95%; padding:0px 20px;} + style=”margin:auto; ! inline-flex at this block level LIMITS the options to center horizontally with margin:auto Yet it works at the next block level???

Block:

.h_align + .flex0·display:inline-flex; min-width:90%; |.block·vertical-align:middle; margin:auto;| .block:before {content:”; display:inline-block; height:100%;}

E

flex0 + h_align_t_50 ··· You need to add style or class.h_align_t_50 {position:relative; left:50%; transform:translate(-50%,0);} to center horizontally

Block:

.h_align + .flex0·display:inline-flex; min-width:90%;|.block·vertical-align:middle; margin:auto;| .block:before {content:”; display:inline-block; height:100%;

E

flex0 + h_align_t_50

Block0 ‹h4 notOK› Content simple

‹article class="flex0 h_align_t_50"›‹sticker›·‹/sticker›
‹section class="block0 h_align_t_50" style="height:60px!important; width:50%;">‹sticker›·‹/sticker›‹div class="centered0"›Block0 ‹h4 notOK›   Content simple‹/div›‹/section›‹/article›

Myblock2:

new section stays inline and accepts ‹h4›

Flex container1:

1st div |

1. flex0 h_align | pw5 v_align (top:50%; but no transform:translate(0,-50%);

2. Myblock2:

new section stays inline

flex0 pw5 | block | myblock2

3. Block | Myblock2:

new section stays inline

Flex container1:

1st div |

4. Myblock2:

new section stays inline

valign

.block:before {content:''; display:inline-block; height:100%; vertical-align:middle!important; margin-right:-0.25em;}
 
css-tricks.com/centering-in-the-unknown/
The base line H posit° between all inline components reacts to the largest? font-size. Hence large fonts push around the base line.

Flow root The line height position shared between all the inline components conforms to the largest? font-size. Hence large fonts push the centered line downwards. With the inline flex it is possible to “margin-top:-npx” and re-center.

Inline flex changes block level displays to inline and also impacts the children in that container. Margins and div classes start to work on inline components!

Flex container1:

1st div |

Flex container1:

1st div |

2nd div |

No div. End flex container.

Text following the flex container.

Flex container2:

new section stays inline and accepts ‹h4›

Now, the entire block/container encloses several div’s w. classes, non div’s etc. that all behave like inline components. TBD?? The same is true when working with grid layout. Using display:grid will give you a block-level box, which creates a grid formatting context for the direct children. Using display:inline-grid will create an inline-level box, which creates a grid formatting context for the children. Note: To create a block-level box with flex children, this means that instead of setting display:flex to create a block-level box with flex children, we will use display:block flex. Instead of display:inline-flex to create an inline-level box with flex children, we will use display:inline flex.

• Developer.mozilla.org/en-US/docs/Web/CSS/display/two-value_syntax_of_display | • VERY DETAILED: drafts.csswg.org/css-display/#display-value-summary

.flex1 {border:3px solid dodgerblue; display:inline-flex; margin:12px; padding:5px;}

‹section class="flex1"›

Display:flow-root | The flow-root prevents the floating item from sticking out if it is higher that the container. It pushes the container like the height:max-content property.

Floated item

Text following the float. In this example we have a floated item inside a container. The float is contained by the bordered box, which wraps it and the text alongside. In the example below we have a floated item inside a container. The two-value syntax for display:flow-root is -> display:block flow-root. Therefore display: inline-block does exactly what display: flow-root does, but with an inline-level, rather than a block-level box. styles: .container1 {display:flow-root; border:2px dotted grey; padding:5px;} .item1 {margin:2px 12px 2px 2px; float:left; border:1px solid grey; padding:10px;}

.container1 {display: flow-root; border:2px dotted grey; padding:1px;}
.item1 {margin: 10px; float: left; border:1px solid grey; padding:10px;}

Display:flow-root

Caption

Inline-flex | inline-flex Edit post - id:84823

logo

img

img1

img2

img3

The images are defined in the page's ACF custom fields | Sourced from: "inline-flex" | ID: "84823"

▷2
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.