Application of CSS Elastic Box Model flex in layout
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!
