flex布局
flex布局
什么叫flex布局：
通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。flex布局是栅格布局的一种，通俗一点讲，响应式布局
- 在 flex 容器中默认存在两条轴，水平主轴(main axis) 和垂直的交叉轴(cross axis)，这是默认的设置，当然你可以通过修改使垂直方向变为主轴，水平方向变为交叉轴。
- 在容器中的每个单元块被称之为 flex item，每个项目占据的主轴空间为 (main size), 占据的交叉轴的空间为 (cross size)
flex使用：
定义在父组件上，说明使用了flex布局
container {
display: flex | inline-flex; //可以有两种取值
}
定义父组件里面的元素排列：row（默认，左右排列，左端起点），row-reverse（左右排列，右端为起点排列），column(上下排列，上为起点)，column-reverse（上下排列，下为起点）
.container {
flex-direction: row | row-reverse | column | column-reverse;
}
定义父组件里面的子组件是否能够换行：nowrap（不换行），wrap（超出换行），wrap-reverse（倒置换行，末位换第一位超出换行）
.container {
flex-wrap: nowrap | wrap | wrap-reverse;
}
定义父组件里面的子组件的对齐方式：flex-start（左对齐），flex-end（右对齐），space-between（两端对齐），center（居中对齐），space-around（间隔对齐）
.container {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
定义子组件的交叉轴对齐方式：flex-start （交叉轴起点对齐），flex-end （交叉轴终点对齐），center （中线对齐），baseline（基于文字基线对齐），stretch（默认）
.container {
align-items: flex-start | flex-end | center | baseline | stretch;
}
内部盒子排序使用，默认值为0，递增排序（从小到大）
.item {
order: <integer>;
}
子盒子放大属性
.item {
flex-grow: <number>;
}
子盒子缩小属性
.item {
flex-shrink: <number>;
}
子盒子属性简写none（不定义属性）flex-grow flex-shrink width（放大属性，缩小属性，宽度），简写默认值为0，往上递增按倍数放大缩小
.item {
flex: none | flex-grow flex-shrink width
}
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
flex-basis取值情况
1. flex-basis规定元素的基准值
2. auto: 首先检索元素主尺寸，若不为auto，则取主尺寸值。若为auto，则取值为content
3. content: 根据元素自动布局
4. 百分比：根据父容器计算，如果父容器未定义尺寸，则计算结果等同故意auto
<style type="text/css">
.parent {
display: flex;
width: 600px;
}
.parent > div {
height: 100px;
}
.item-1 {
width: 140px;
flex: 2 1 0%;
}
.item-2 {
width: 100px;
flex: 2 1 auto;
}
.item-3 {
flex: 1 1 200px;
}
1. 主轴父容器尺寸：600px
2. 子元素总基准值：0% + auto + 200px =300px;
0% 即0宽度
auto à对应item-2的尺寸，100px
3. 剩余空间：600px-300px = 300px;
4. 放大比例2 + 2 + 1 = 5px;
5. 剩余空间分配,item-1和item-2占2/5，即120px,item-3占1/5,60px
6. 所以
tem-1: 0% + 120px = 120px
item-2: auto + 120px = 220px
item-3: 200px + 60px = 260px;
案例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='flex'>
<div id='flex_left' >
<div class='aa'>
导航1
</div>
<div class='bb'>
导航2
</div>
<div class='cc'>
导航3
</div>
</div>
<div id='flex_center'>
</div>
<div id='flex_right'>
<div class='aa'>
登陆
</div>
<div class='bb'>
退出
</div>
</div>
</div>
<div id='main'>
<div class='left'>
</div>
<div class='main_center'>
<div class='right_log'></div>
<div class='footer'></div>
</div>
</div>
</body>
<style>
*{
margin:0;
padding:0;
}
// 给父盒子定义是flex布局/横向布局
#flex{
background:#ccc;
display: flex;
flex-direction:row;
}
// 给左边父盒子定义flex布局/横向布局/左对齐
#flex_left{
display: flex;
width:600px;
height:60px;
flex-direction:row;
justify-content: flex-start;
}
.aa{
width:100px;
height:60px;
background:red;
display:inline-black;
}
.bb{
width:100px;
height:60px;
background:green;
}
.cc{
width:100px;
height:60px;
background:yellow;
}
// 给右边的父盒子定义flex布局/横向布局/右对齐
#flex_right{
width:400px;
display: flex;
flex-direction:row;
justify-content: flex-end;
}
// 给中间的盒子定义可扩展，宽度auto
#flex_center{
flex:1 0 auto;
}
// 给下面的内容父盒子定义/横向布局
#main{
height:875px;
display: flex;
flex-direction:row;
}
// 左边的盒子，可缩，最小400px
.left{
flex:0 1 400px;
background:#f0f;
}
// 右边的父盒子定义flex布局//可扩展宽度auto/竖向布局
.main_center{
display: flex;
flex:1 0 auto;
flex-direction:column;
}
// 右边的内容/可扩展宽auto
.right_log{
flex: 1 0 auto;
background:#ff0;
}
.footer{
height:60px;
background:#0f0;
}
</style>
<script>
</script>
</html>
样式模样
