Get into the habit of writing together! This is the sixth day of my participation in the "Nuggets Daily New Plan · April Update Challenge", click to view the details of the event
foreword
In real application scenarios, various devices of different sizes and resolutions are usually encountered. In order to properly layout our application interface on all these devices, a responsive interface design method is required to fully satisfy the ⾜ This complex layout needs.
The advantage of the flex elastic box model is that developers only need to declare the behavior that the layout should have, without giving a specific implementation method. The browser is responsible for completing the actual layout. When the layout involves an indeterminate width, the distribution is aligned. When the flexbox layout is given priority.
grammar
flex-direction: adjust the main axis direction
row：主轴方向为水平向右
column：主轴方向为竖直向下
row-reverse:主轴方向为水平向左
column-reverse:主轴方向是竖直向上。
复制代码justify-content is mainly used to set the alignment of the main axis direction
flex-start: 弹性盒子元素将向起始位置对齐
flex-end: 弹性盒子元素将向结束位置对齐。
center: 弹性盒子元素将向行中间位置对齐
space-around: 弹性盒子元素会平均地分布在行里
space-between:第一个贴左边，最后一个贴右边，其他盒子均分，保证每个盒子之间的空隙是相等的。
复制代码align-items is used to adjust the alignment of the side axis
flex-start： 元素在侧轴的起始位置对齐。
flex-end： 元素在侧轴的结束位置对齐。
center： 元素在侧轴上居中对齐。
stretch： 元素的高度会被拉伸到最大（不给高度时, 才拉伸）。
复制代码The flex-wrap property controls whether the flex container is single-line or multi-line, and does not wrap by default
nowrap： 不换行（默认），如果宽度溢出，会压缩子盒子的宽度。
wrap： 当宽度不够的时候，会换行。
复制代码align-content is used to set the arrangement of multi-line flex containers
flex-start： 各行向侧轴的起始位置堆叠。
flex-end： 各行向弹性盒容器的结束位置堆叠。
center： 各行向弹性盒容器的中间位置堆叠。
space-around： 各行在侧轴中平均分布。
space-between： 第一行贴上边，最后一个行贴下边,其他行在弹性盒容器中平均分布。
stretch：拉伸，不设置高度的情况下。
复制代码Small Demo
flex axis change
<ul class="box">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
复制代码<style>
/* *{
margin:0;
padding:0;
} */
.box{
width:500px;
height:500px;
margin:20px auto;
background:pink;
display: flex;
/* 主轴侧轴相互调换,而且主轴侧轴上的属性依旧可以使用，属性跟随轴一起走 */
/* 默认 主轴水平 */
/* flex-direction: row; */
/* 切换 主轴垂直 */
/* flex-direction: column; */
/* flex-direction: column-reverse; */
align-items: center;
justify-content: space-between;
}
li {
list-style: none;
width: 100px;
height: 100px;
background-color: skyblue;
}
</style>
复制代码flex wrap
<ul class="box">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>8</li>
<li>8</li>
<li>8</li>
<li>8</li>
</ul>
复制代码 <style>
*{
margin:0;
padding:0;
}
.box{
width:500px;
height:500px;
margin:20px auto;
background:pink;
display: flex;
/* 默认不换行 */
/* flex-wrap: nowrap; */
/* 换行 */
flex-wrap: wrap;
}
li {
/* 弹性布局中，如果一排放不下，会压缩 */
list-style: none;
width: 100px;
height: 100px;
background-color: skyblue;
}
</style>
复制代码flex side axis alignment
<ul class="box">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>8</li>
<li>8</li>
<li>8</li>
<li>8</li>
</ul>
复制代码<style>
*{
margin:0;
padding:0;
}
.box{
width:500px;
height:500px;
margin:20px auto;
background:pink;
display: flex;
flex-wrap: wrap;
flex-direction:column;
/* 单行和多行的区别 通过查看是否有换行属性 */
/* 无论是否生效，都不能够混用！！！！ */
/* 单行 */
/* align-items: center;
align-items: flex-start;
align-items: flex-end;
align-items: stretch; */
/* 多行 */
/* align-content: center; */
/* align-content: flex-start; */
/* align-content: flex-end; */
/* 两端对齐，剩余平分 */
/* align-content: space-between; */
/* 每一个元素都拥有属于自己的间隙 */
/* align-content: space-around; */
/* 每一个元素之间间隙完全一样 */
/* align-content: space-evenly; */
}
li {
list-style: none;
width: 100px;
height: 100px;
background-color: skyblue;
}
</style>
复制代码Application of flex:1
<ul>
<li>张三</li>
<li>李四</li>
<li>王五</li>
</ul>
复制代码 <style>
*{
padding: 0;margin: 0;
}
li{
/* width: 200px; */
height: 200px;
list-style: none;
background-color: skyblue;
}
ul {
/* 开启弹性布局 */
display: flex;
width: 1000px;
height: 200px;
margin: 100px auto;
background-color: pink;
}
li {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
li:nth-child(2){
flex: 2;
background-color: teal;
}
li:nth-child(3){
flex: 3;
background-color: tomato;
}
</style>
复制代码Comprehensive use of flex dice
<div class="table">
<div class="touzi t1">
<span></span>
</div>
<div class="touzi t2">
<span></span>
<span></span>
</div>
<div class="touzi t3">
<span></span>
<span></span>
<span></span>
</div>
<div class="touzi t4">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="touzi t5">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="touzi t6">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
复制代码 <style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.table {
display: flex;
justify-content: space-evenly;
align-items: center;
width: 600px;
height: 600px;
margin: 100px auto;
background-color: teal;
}
.touzi {
display: flex;
width: 80px;
height: 80px;
background-color: whitesmoke;
border-radius: 15px;
padding: 10px;
}
.t1 span {
background-color: red;
}
.t1 {
justify-content: center;
align-items: center;
}
span {
display: block;
width: 18px;
height: 18px;
background-color: black;
border-radius: 50%;
}
.t2 {
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.t3 {
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.t3 span:nth-child(1) {
align-self: flex-start;
}
.t3 span:last-child {
align-self: flex-end;
}
.t4 {
justify-content: space-between;
align-content: space-between;
flex-wrap: wrap;
}
.t4 span {
margin: 5px;
}
.t5 {
justify-content: space-between;
align-content: space-between;
flex-wrap: wrap;
}
.t6 {
justify-content: space-between;
align-content: space-between;
flex-wrap: wrap;
flex-direction: column;
}
.t5 span:nth-child(3) {
margin: 0 21px;
}
</style>
复制代码