CSS3 elastic box
Case sharing
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://at.alicdn.com/t/font_2870866_bl0ozdsuq.css">
<title>Document</title>
<style>
*{padding: 0; margin: 0;}
body,html{
height: 100%;
}
ul,li{
list-style: none;
}
.father{
width: 600px;
height: 100%;
margin: 0 auto;
display: flex;
flex-direction: column;
}
header,footer
{
width: 100%;
height: 80px;
background: plum;
}
header{
background-color: #3F454F;
display: flex;
justify-content: space-between;
}
header>.left{
height: 100%;
line-height: 80px;
margin-left: 20px;
}
header>.left>span{
color: white;
font-size: 20px;
}
header>.right{
height: 100%;
line-height: 80px;
}
header>.right>span{
color: white;
font-size: 20px;
margin-right: 20px;
}
header>div>.iconfont{
font-size: 25px;
}
section{
width: 100%;
flex: 1;
font-size: 0;
overflow-y: auto;
}
section>.header{
width: 100%;
height: 160px;
display: flex;
justify-content: space-evenly;
background-color: #3F454F;
align-items: center;
}
section>.header>figure{
width: 20%;
color: white;
font-size: 25px;
text-align: center;
}
section>.header>figure>figcaption{
margin-top: 10px;
}
section>.header>figure>.iconfont{
font-size: 30px;
color: white;
}
section>main{
width: 100%;
}
section>main>ul{
width: 100%;
display: flex;
flex-wrap: wrap;
}
section>main>ul>li{
width: 25%;
height: 130px;
box-sizing: border-box;
border: 1px solid gray;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
section>main>ul>li>.iconfont{
font-size: 40px;
color: red;
}
section>main>ul>li>figcaption{
font-size: 26px;
margin-top: 10px;
}
footer{
display: flex;
justify-content: space-evenly;
align-items: center;
text-align: center;
background: #3F454F;
color: white;
}
footer>figure>.iconfont{
font-size: 30px;
}
footer>figure>figcaption{
font-size: 20px;
}
</style>
</head>
<body>
<div class="father">
<header>
<div class="left">
<span class="iconfont icon-zhangdan"></span>
<span>bill</span>
</div>
<div class="right">
<span class="iconfont icon-xiaoren"></span>
<span class="iconfont icon-sousuo"></span>
<span class="iconfont icon-zengjiatianjiajiahao"></span>
</div>
</header>
<section>
<div class="header">
<figure>
<span class="iconfont icon-saoyisao"></span>
<figcaption>scan</figcaption>
</figure>
<figure>
<span class="iconfont icon-shouye"></span>
<figcaption>payment</figcaption>
</figure>
<figure>
<span class="iconfont icon-kajuanfafangguanli"></span>
<figcaption>Card voucher</figcaption>
</figure>
<figure>
<span class="iconfont icon-xiuli"></span>
<figcaption>Fix it</figcaption>
</figure>
</div>
<main>
<ul>
<li>
<span class="iconfont icon-zhuanzhang"></span>
<figcaption>transfer accounts</figcaption>
</li>
<li>
<span class="iconfont icon-zhuanzhang"></span>
<figcaption>transfer accounts</figcaption>
</li>
<li>
<span class="iconfont icon-zhuanzhang"></span>
<figcaption>transfer accounts</figcaption>
</li>
<li>
<span class="iconfont icon-zhuanzhang"></span>
<figcaption>transfer accounts</figcaption>
</li>
<li>
<span class="iconfont icon-zhuanzhang"></span>
<figcaption>transfer accounts</figcaption>
</li>
<li>
<span class="iconfont icon-zhuanzhang"></span>
<figcaption>transfer accounts</figcaption>
</li>
<li>
<span class="iconfont icon-zhuanzhang"></span>
<figcaption>transfer accounts</figcaption>
</li>
<li>
<span class="iconfont icon-zhuanzhang"></span>
<figcaption>transfer accounts</figcaption>
</li>
<li>
<span class="iconfont icon-zhuanzhang"></span>
<figcaption>transfer accounts</figcaption>
</li>
<li>
<span class="iconfont icon-zhuanzhang"></span>
<figcaption>transfer accounts</figcaption>
</li>
<li>
<span class="iconfont icon-zhuanzhang"></span>
<figcaption>transfer accounts</figcaption>
</li>
<li>
<span class="iconfont icon-zhuanzhang"></span>
<figcaption>transfer accounts</figcaption>
</li>
</ul>
</main>
<img src="../picture/Qimengxia.png" alt="">
<main>
<ul>
<li>
<span class="iconfont icon-zhuanzhang"></span>
<figcaption>transfer accounts</figcaption>
</li>
<li>
<span class="iconfont icon-zhuanzhang"></span>
<figcaption>transfer accounts</figcaption>
</li>
<li>
<span class="iconfont icon-zhuanzhang"></span>
<figcaption>transfer accounts</figcaption>
</li>
<li>
<span class="iconfont icon-zhuanzhang"></span>
<figcaption>transfer accounts</figcaption>
</li>
<li>
<span class="iconfont icon-zhuanzhang"></span>
<figcaption>transfer accounts</figcaption>
</li>
<li>
<span class="iconfont icon-zhuanzhang"></span>
<figcaption>transfer accounts</figcaption>
</li>
<li>
<span class="iconfont icon-zhuanzhang"></span>
<figcaption>transfer accounts</figcaption>
</li>
<li>
<span class="iconfont icon-zhuanzhang"></span>
<figcaption>transfer accounts</figcaption>
</li>
<li>
<span class="iconfont icon-zhuanzhang"></span>
<figcaption>transfer accounts</figcaption>
</li>
<li>
<span class="iconfont icon-zhuanzhang"></span>
<figcaption>transfer accounts</figcaption>
</li>
<li>
<span class="iconfont icon-zhuanzhang"></span>
<figcaption>transfer accounts</figcaption>
</li>
<li>
<span class="iconfont icon-zhuanzhang"></span>
<figcaption>transfer accounts</figcaption>
</li>
</ul>
</main>
</section>
<footer>
<figure>
<span class="iconfont icon-hongbao"></span>
<figcaption>Yu EBAO</figcaption>
</figure>
<figure>
<span class="iconfont icon-hongbao"></span>
<figcaption>Yu EBAO</figcaption>
</figure>
<figure>
<span class="iconfont icon-hongbao"></span>
<figcaption>Yu EBAO</figcaption>
</figure>
<figure>
<span class="iconfont icon-hongbao"></span>
<figcaption>Yu EBAO</figcaption>
</figure>
</footer>
</div>
</body>
</html>1,display:flex
Description: set as elastic box (parent element added)
2. Flex direction (spindle arrangement)
explain:
The order specifies the position of the elastic child element in the parent container
Rows are arranged in one row by default
Row reverse: reverse the horizontal arrangement (right alignment, from the back to the front, and the last item is in the front.
column: vertical arrangement.
Column reverse: reverse the vertical arrangement, from bottom to top, with the last item at the top
3. Justify content (spindle alignment)
Note: the justify content attribute is applied to the elastic container to align the elastic items along the main axis of the elastic container
■ flex start default, top aligned
■ flex end end alignment
■ center alignment
■ space between two ends are aligned and automatically distributed in the middle
■ space around automatic distance assignment
4. Align items
Description: side axis alignment
Flex start: the boundary of the starting position of the side axis (longitudinal axis) of the elastic box element is close to the starting boundary of the side axis of the row.
Flex end: the boundary of the starting position of the side axis (longitudinal axis) of the elastic box element is close to the end boundary of the side axis of the row.
center: the elastic box element is centered on the side axis (longitudinal axis) of the row. (if the size of the row is smaller than the size of the elastic box element, it will overflow the same length in both directions).
Baseline: if the inner axis and side axis of the elastic box element are the same, this value is equivalent to 'flex start'. In other cases, this value will participate in baseline alignment
5,flex-wrap
Note: this attribute controls whether the flex container is a single row or multiple rows, and the direction of the horizontal axis determines the stacking direction of new rows.
nowrap: the flex container is a single line. In this case, flex children may overflow the container
wrap: the flex container is multi row. In this case, the overflow part of the flex subitem will be placed on a new row, and a line break will occur inside the subitem
Wrap reverse: reverse the wrap arrangement.
6. Align content (line to line alignment)
Note: when there is extra space on the side axis of the telescopic container, this attribute can be used to adjust the alignment of the "telescopic line" in the telescopic container, which is the same as the alignment of the telescopic item on the main axis The justify content '> attribute is similar. Please note that this attribute has no effect on a single row telescopic container.
■ flex start has no line spacing
■ flex end bottom alignment without line spacing
■ no row spacing in center
■ space between two ends are aligned and automatically distributed in the middle
■ space around automatic distance assignment
7,align-self
Description: the align self attribute specifies the alignment of the selected items in the flexible container.
Note: the align self attribute overrides the align items attribute of the flexible container
auto default. The element inherits the align items attribute of its parent container. If there is no parent container, it is "stretch".
The Stretch element is stretched to fit the container.
The Center element is located in the Center of the container.
The flex start element is at the beginning of the container.
The flex end element is at the end of the container.
8,order
Note: number sorts the priority. The larger the number, the more it goes to the back row. The default value is 0. Negative numbers are supported.
9,flex
Description: composite property. Sets or retrieves how the child elements of the elastic box model object allocate space.
Abbreviated as "flex: 1", the calculated value is "1 0%"
Abbreviated as "flex: auto", the calculated value is "1 Auto"
flex: none ", the calculated value is" 0 0 auto "
If "flex: 0 auto" or "flex: initial", the calculated value is "0 1 auto", that is, the initial value of "flex"
10. Introduction to the three attribute values of flex
Flex grow is a number that specifies how much the project will expand relative to other flexible projects. Flex shrink is a number that specifies how much the project will shrink relative to other flexible projects. The length of the flex basis project