目录
一、flex布局
1.1. 认识flex布局
1.2. flex布局重要的概念
二、flex container中的属性
2.1.flex-direction
2.2.flex-wrap、flex-flow
2.3.justify-content
2.4.align-items
2.5.align-content
三、 flex item中的属性
3.1.order
3.2.align-self
3.3.flex-grow、flex-shrink
3.4.flex-basis
3.5.flex
四、 flex布局中justify-content最后一行布局问题
一、flex布局
1.1. 认识flex布局
1.2. flex布局重要的概念
-
flex container
-
flex item
-
main axis/cross axios
-
main start/main end/cross start / cross end
二、flex container中的属性
2.1.flex-direction
<style>.box{width: 500px;height: 500px;background-color: pink;display: flex;/* 默认是row row-reverse反个方向*//* 方向改为列 culumn culumn-reverse反个方向*/flex-direction:column-reverse;}.item{width: 50px;height: 120px;}</style>
</head>
<body><div class="box"><div class="item item1" >1</div><div class="item item2" >2</div><div class="item item3" >3</div><div class="item item4" >4</div><div class="item item5" >5</div></div>
</body>2.2.flex-wrap、flex-flow
<style>.box{width: 500px;height: 500px;background-color: pink;display: flex;/* wrap 默认nowrap 弹性item会压缩 *//* wrap换行 上面是第一行如然后第二行 *//* wrap-reverse 最下面是第一行 *//* flex-wrap: wrap-reverse; *//*flex-flow 复合属性 */flex-flow: column wrap-reverse;}.item{width: 150px;height: 120px;}</style>
</head>
<body><div class="box"><div class="item item1" >1</div><div class="item item2" >2</div><div class="item item3" >3</div><div class="item item4" >4</div><div class="item item5" >5</div></div>2.3.justify-content
<style>.box{width: 500px;height: 500px;background-color: pink;display: flex;/* 切换justify-content *//* flex-start:让元素和主轴的start方向对齐 *//* flex-end：让元素和主轴的end方向对齐 *//* center：居中对齐 *//* space-between：两端放一个元素，让其余元素一定要空间等分 *//* space-evenly：两端也有间距,并且所有空间进行等分 *//* space-around：两端也有间距，两端的间距是items中间的间距的一半*/justify-content: space-evenly}.item{width: 100px;height: 120px;}</style>
</head>
<body><div class="box"><div class="item item1" >1</div><div class="item item2" >2</div><div class="item item3" >3</div></div>2.4.align-items
<style>.box{width: 500px;height: 500px;background-color: pink;display: flex;/* align-items: flex-end; */align-items: center;}.item1{width: 100px;height: 120px;background-color: red;}.item2{width: 100px;height: 60px;background-color:blue;}.item3{width: 100px;height: 200px;background-color: skyblue;}</style>
</head>
<body><div class="box"><div class="item item1" >1</div><div class="item item2" >2</div><div class="item item3" >3</div></div>
</body>2.5.align-content
<style>.box{width: 500px;height: 500px;background-color: pink;display: flex;flex-wrap: wrap;/* 多行在交叉轴上怎么排布 和justify-content一样*//* align-content: center; */align-content: space-between;}.item{width: 100px;height: 120px;background-color: red;}</style>
</head>
<body><div class="box"><div class="item item1" >1</div><div class="item item2" >2</div><div class="item item3" >3</div><div class="item item1" >1</div><div class="item item2" >2</div><div class="item item3" >3</div><div class="item item1" >1</div><div class="item item2" >2</div><div class="item item3" >3</div><div class="item item1" >1</div><div class="item item2" >2</div><div class="item item3" >3</div></div>
</body>三、 flex item中的属性
3.1.order
<style>.box{width: 500px;height: 500px;background-color: pink;display: flex;}.item{width: 100px;height: 120px;background-color: red;}/* order值越小越排在前面 */.item1{order:2;}.item2{order:1;}.item3{order:5;}</style>
</head>
<body><div class="box"><div class="item item1" >1</div><div class="item item2" >2</div><div class="item item3" >3</div></div>
</body>3.2.align-self
<style>.box{width: 500px;height: 500px;background-color: pink;display: flex;align-items: center;}.item{width: 100px;height: 120px;background-color: red;}.item1{height: 100px;/* 单独设置在交叉轴的对齐方式 */align-self: flex-start;}.item2{height: 50px;}.item3{height: 120px;}</style>
</head>
<body><div class="box"><div class="item item1" >1</div><div class="item item2" >2</div><div class="item item3" >3</div></div>
</body>3.3.flex-grow、flex-shrink
<style>.box{width: 500px;height: 500px;background-color: pink;display: flex;align-items: center;}.item{width: 200px;height: 120px;/* 默认值是1 都会进行压缩 */flex-shrink: 0;background-color: red;}.item1{/* 有剩余空间时 分配给这个item1份 *//* flex-grow: 1; *//*当放不下的时候 默认每个元素会进行平均压缩 *//* 设置了两个flex-shrink 就它们两会进行压缩 */flex-shrink: 1;}.item2{/* 有剩余空间时 分配给这个item2份 *//* flex-grow: 2; */flex-shrink: 1;}</style>
</head>
<body><div class="box"><div class="item item1" >1</div><div class="item item2" >2</div><div class="item item3" >3</div><div class="item item4" >4</div><div class="item item5" >5</div><div class="item item6" >6</div></div>3.4.flex-basis
<style>.box{width: 500px;height: 500px;background-color: pink;display: flex;}.item{/* width: 100px; */height: 120px;/* 基础尺寸是100 当有一个完整的单词显示不下的时候 会进行拉伸让它显示 */flex-basis: 100px;}</style>
</head>
<body><div class="box"><div class="item item1" >1csdfa_fsfadfada_fsfafafaftre</div><div class="item item2" >2</div><div class="item item3" >3</div></div>
</body>3.5.flex
四、 flex布局中justify-content最后一行布局问题
就是在后面加几个span并且宽度要和item宽度一样 要的span数量为一行的item数减2
<style>.box{width: 500px;background-color: pink;display: flex;flex-wrap: wrap;justify-content: space-between;}.item{width: 110px;height: 150px;background-color: red;}.box > span{width: 110px;}</style>
</head>
<body><div class="box"><div class="item item1" >1</div><div class="item item2" >2</div><div class="item item3" >3</div><div class="item item4" >4</div><div class="item item1" >1</div><div class="item item2" >2</div><div class="item item3" >3</div><div class="item item4" >4</div><div class="item item1" >1</div><div class="item item2" >2</div><div class="item item3" >3</div><span></span><span></span></div>
</body>
![[Collection与数据结构] B树与B+树](https://i-blog.csdnimg.cn/direct/b96afb008a104ddca272db3e6e105ace.png)
