1.display:flex布局笔记

首页 > 代码库 > 1.display:flex布局笔记

2024-10-22 07:32:39 224人阅读

　　/*display:flex布局方式主要运用于垂直居中的效果*/

　　一、Flex译为Flexible Box（弹性盒子），任何一个容器都可以指定为Flex布局

　　注:设置为Flex布局之后，子元素的float，clear，vertical-align属性都失效

 1 .box1 {
 2   display : flex   
 3 }
 4 .box2 {
 5   display : inline-flex   
 6 }
 7 .box3 {
 8   display : -webkit-flex;
 9   display : flex      
10 }

　　二、基本

　　1.采用Flex布局的元素，称为Flex容器（flex container），简称"container"。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"item"。

　　技术分享

　　容器中默认存在两根轴：水平主轴（main axis）和垂直交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。子元素默认沿主轴排列。单个子元素占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

　　三、容器属性

　　1.flex-direction（主轴方向，即子元素排列方向）

　　　　（1）row(默认) ：主轴为水平方向，起点在左边

　　　　（2）row-reverse ：主轴为水平方向，起点在右边

　　　　（3）column ：主轴为垂直放方向，起点在上边

　　　　（4）column-reverse ：主轴为垂直方向，起点在下边

　　　　（5）下图布局分别为： column-reverse、column、row、row-reverse

技术分享

//HTML代码

1 <div class="box">
2     <div class="item">item</div> 
3     <div class="item">item</div>
4     <div class="item">item</div>
5 </div>

　　//CSS代码　　

 1 .box {
 2     display : -webkit-flex;
 3     disppaly : flex;
 4     margin-top: 10px;
 5     border:1px solid #333c44;
 6     -ms-flex-direction: row | row-reverse | column | column-reverse;
 7     -webkit-flex-direction: row | row-reverse | column | column-reverse;
 8     flex-direction: row | row-reverse | column | column-reverse;     
 9 }
10 
11 .item {
12    width: 100px;
13     height: 100px;
14     background: #f0ad4e;
15     margin:10px;   
16 }

　　2.flex-wrap

　　（1）nowrap（默认）：item子元素不换行

　　（2）wrap ： item子元素换行，第一行在上边

　　（3）wrap-reverse ： item子元素换行，第一行在下边

//HTML代码

1 <div class="wrap">
2         <div class="wrap-item">item1</div>
3         <div class="wrap-item">item2</div>
4         <div class="wrap-item">item3</div>
5         <div class="wrap-item">item4</div>
6         <div class="wrap-item">item5</div>
7         <div class="wrap-item">item6</div>
8         <div class="wrap-item">item7</div>
9 </div>

//CSS代码

 1 .wrap {
 2     width: 300px;
 3     border:1px solid #333c44;
 4     display: flex;
 5     display: -webkit-flex;
 6     flex-wrap: wrap | nowrap | wrap-reverse;
 7 }
 8 .wrap-item {
 9     width: 50px;
10     height: 50px;
11     background: #00a8f3;
12     margin: 10px;
13 }

　　3.flex-flow ：< flex-direction> || <flex-wrap>，两个属性的组合

//HTML代码

1 <div class="flex-flow">
2         <div class="flex-flow-item">item01</div>
3         <div class="flex-flow-item">item02</div>
4         <div class="flex-flow-item">item03</div>
5         <div class="flex-flow-item">item04</div>
6         <div class="flex-flow-item">item05</div>
7 </div>

//CSS代码

 1 .flex-flow {
 2     border:1px solid #333c44;
 3     width:200px;
 4     display: flex;
 5     display: -webkit-flex;
 6     flex-flow:row（row-reverse | column | column-reverse） nowrap（wrap | wrap-reverse）;  /*两两组合*/
 7 }
 8 .flex-flow-item {
 9     width: 50px;
10     height: 50px;
11     background: darkkhaki;
12     margin:10px;
13 }

　　4.justify-content ： flex-start | flex-end | center | space-between | space-around ，定义子元素项目在主轴水平方向上的对齐方式

　　　　（1）flex-start ：左对齐

　　　　（2）flex-end ：右对齐

　　　　（3）center ：居中

　　　　（4）space-between ：两端对齐，子元素之间的距离相等

　　　　（5）space-around ：每个子元素两侧的间隔相等

　　　　技术分享

//HTML代码

1 <div class="justify-content">
2         <div class="justify-item">item01</div>
3         <div class="justify-item">item02</div>
4         <div class="justify-item">item03</div>
5         <div class="justify-item">item04</div>
6         <div class="justify-item">item05</div>
7 </div>

//CSS代码

 1 .justify-content {
 2     width: 800px;
 3     border:1px solid #333c44;
 4     display: -webkit-flex;
 5     display: flex;
 6     justify-content: flex-start | flex-end | center | space-between | space-around; /*默认为flex-start*/  
 7 }
 8 .justify-item {
 9     width: 50px;
10     height: 50px;
11     background: gold;
12     margin: 10px;
13 }