Flex——告别CSS布局
2020-11-30 本文已影响0人
我是Msorry
Flex 布局可以实现空间自动分配、自动对齐
Flex 适用于简单的线性布局，复杂布局使用 Grid 布局
注意：设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
基本概念
image.png
flex-container的属性
flex-direction 排列方向
- row 从左往右排列
- row-reverse 从右往左排列
- column 从上到下排列
- column-reverse 从下到上排列
flex-wrap 换行
- nowrap 不换行
- wrap 换行
- wrap-reverse 换行后换成逆行序的多行
flex-flow 上面两个属性的简写
flex-flow:row wrap;
justify-content 主轴对齐方式
- center 主轴中间对齐
- space-between 主轴两端对齐
- space-around 每个 item 主轴方向保持相等距离的方式对齐
- space-evenly 主轴均匀对齐
- flex-end 主轴终点对齐
align-items 侧轴对齐方式
- stretch 侧轴方向没固定尺寸时，各个 item 侧轴方向的尺寸延伸至与最大item等长
- flex-start 侧轴起点对齐
- flex-end 侧轴终点对齐
- center 侧轴中间对齐
- space-between 侧轴两端对齐
- space-around 每个 item 侧轴方向保持相等距离的方式对齐
align-content 换行后变成多行多列的对齐方式
- flex-start 多行都集中在侧轴起点
- flex-end 多行都集中在侧轴终点
- center 多行都集中在侧轴中间
- space-between 行与行之间保持相等距离
- space-around 每行的周围保持相等距离
- stretch 每一行都被拉伸以填满容器
flex-item的属性
flex-grow 伸展比例（空间过多时）
- number 主轴方向，按比例占据自由空间
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.flex_item{
height:100px;
border:3px solid green;
background: #ddd;
font-size:30px;
}
.flex_container{
display:flex;
border:5px solid black;
background:#f60;
}
.flex_item:nth-child(1){
flex-grow:1;
}
</style>
</head>
<body>
<div class="flex_container">
<div class="flex_item">1</div>
<div class="flex_item">2</div>
<div class="flex_item">3</div>
</div>
</body>
</html>
image.png
flex-shrink 收缩比例（空间不足时）
- number 主轴方向，按比例收缩自身空间
flex-basis 固定大小（一般不用）
flex-basis:100px
flex
flex: 1 2 100px;
伸展时占一份，收缩时占两份，默认100px
order 展示顺序（代替双飞翼）
默认值为0，可以设置正数或负数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.flex_item{
height:100px;
border:3px solid green;
background: #ddd;
font-size:30px;
}
.flex_container{
display:flex;
border:5px solid black;
background:#f60;
}
.flex_item:nth-child(3){
order:-1;
}
</style>
</head>
<body>
<div class="flex_container">
<div class="flex_item">1</div>
<div class="flex_item">2</div>
<div class="flex_item">3</div>
</div>
</body>
</html>
image.png
align-self 自身侧轴对齐方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.flex_item{
height:100px;
border:3px solid green;
background: #ddd;
font-size:30px;
}
.flex_container{
display:flex;
height:200px;
border:5px solid black;
background:#f60;
align-items:center;
}
.flex_item:nth-child(1){
height:50px
}
.flex_item:nth-child(2){
height:100px
}
.flex_item:nth-child(3){
height:150px;
align-self:flex-start;
}
</style>
</head>
<body>
<div class="flex_container">
<div class="flex_item">1</div>
<div class="flex_item">2</div>
<div class="flex_item">3</div>
</div>
</body>
</html>
image.png
