Shulou(Shulou.com)06/03 Report--

This article mainly talks about "the application of CSS elastic box model flex in layout". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Now let the editor to take you to learn "the application of CSS elastic box model flex in layout"!

Element centered [1] Spindle alignment justify-content and side axis alignment align-items are used on telescopic containers

JavaScript Code copies content to the clipboard

.parent {

Display: flex

Justify-content: center

Align-items: center

}

XML/HTML Code copies content to the clipboard

DEMO

[2] using margin:auto on scalable projects

CSS Code copies content to the clipboard

.parent {

Display: flex

}

.in {

Margin: auto

}

XML/HTML Code copies content to the clipboard

DEMO

Alignment at both ends

CSS Code copies content to the clipboard

.parent {

Display: flex

Justify-content:space-between

}

XML/HTML Code copies content to the clipboard

DEMO

DEMO

DEMO

DEMO

Bottom alignment

CSS Code copies content to the clipboard

.parent {

Display: flex

Align-items: flex-end

}

XML/HTML Code copies content to the clipboard

DEMO

DEMO

DEMO

DEMO

Input box button

CSS Code copies content to the clipboard

.inputBox {

Display: flex

Width: 250px

}

. inputBox-ipt {

Flex: 1

}

XML/HTML Code copies content to the clipboard

Button

Equal distribution bureau

CSS Code copies content to the clipboard

Body,p {margin: 0;}

.parent {

Display: flex

}

.child {

Flex:1

Height: 100px

}

.child + .child {

Margin-left: 20px

}

XML/HTML Code copies content to the clipboard

one

two

three

four

Multi-column adaptive layout

CSS Code copies content to the clipboard

P {margin: 0;}

.parent {display: flex;}

.left, .center {margin-right: 20px;}

.rightright {flex: 1;}

XML/HTML Code copies content to the clipboard

Left

Left

Center

Center

Right

Right

Suspension layout

CSS Code copies content to the clipboard

.box {

Display: flex

Background-color: lightgrey

Width: 300px

}

.left {

Margin-right: 20px

Background-color: lightblue

Height: 30px

}

.main {

Flex:1

}

XML/HTML Code copies content to the clipboard

Left suspension

Main content

Full screen layout

CSS Code copies content to the clipboard

Body,p {margin: 0;}

Body,html,.parent {height: 100%;}

.parent {

Display: flex

Flex-direction: column

}

.top, .bottombottom {

Height: 50px

}

.middle {

Display: flex

Flex: 1

}

.left {

Width: 100px

Margin-right: 20px

}

.rightright {

Flex: 1

Overflow: auto

}

. rightright-in {

Height: 1000px

}

XML/HTML Code copies content to the clipboard

Top

Left

Right

Bottom

At this point, I believe you have a deeper understanding of "the application of CSS elastic box model flex in layout". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.