1. 认识flex布局
1.1 flex-container 和 flex-items
1.2. 兼容性
1.3 如何开启flex布局
.box{
/* 开启flex布局 */
/*
块级的开启方式是display设置为flex
行内元素开启布局的方式是inline-flex
*/
display: flex;
}
2. flex的布局模型
默认主轴为横向的模型图
2.1 应用在flex container 上的css属性
- flex-direction
- justify-content
- align-items
- flex-wrap
- flex-flow
- align-content
flex-direction
<style>
.box{
/* 开启flex布局 */
/*
块级的开启方式是display设置为flex
行内元素开启布局的方式是inline-flex
*/
display: flex;
width: 500px;
height: 400px;
background-color: red;
}
.item{
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
}
.item1{
background-color: rebeccapurple;
}
.item2{
background-color: #0f0;
}
.item3{
background-color: #fff;
}
</style>
</head>
<body>
<div class="box">
<div class="item item1">item1</div>
<div class="item item2">item2</div>
<div class="item item3">item3</div>
<!-- <div></div> -->
</div>
<strong>加粗样式</strong>
</body>
默认情况主轴方向从左到右
加了方向设置
/* flex-direction默认情况从左到右 */
flex: row;(默认值)
/* 和主轴方向从右到左的排列 */
flex-direction: row-reverse;
/* 主轴方向从上到下 */
flex-direction:column;
/* 主轴方向下到上 */
flex-direction:column-reverse;
Justify-content
- 决定了flex items在main axis上的对齐方式
/* 默认值 与main start对齐*/
justify-content: flex-start;
/* flex-end与main end对齐 */
justify-content: flex-end;
/* 居中对齐 */
justify-content:center;
/* 间隔居中对齐 */
/* justify-content: space-between; */
/* 均匀居中， */
/* justify-content: space-evenly; */
/* 两边的间隔小，中间间隔大 */
/* justify-content: space-around; */
align-items
- 决定了flex items在cross axis上的对齐方式
它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。
· flex-start：交叉轴的起点对齐。
· flex-end：交叉轴的终点对齐。
· center：交叉轴的中点对齐。
· baseline: 项目的第一行文字的基线对齐。
· stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
align-items:stretch|normal;
item 没有设置高度的话，默认会充满整个容器
align-items:flex-start;
align-items:flex-end;
按照cross-end对齐
align-items: center;
按照交叉轴的中心点对齐
align-items: baseline;
按照基线对齐（内容第一行文本的基线）
flex-wrap
- 默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
nowrap（默认）:单行
wrap:多行
wrap-reverse:多行（反转）
flex-wrap:nowrap;
flex-wrap:wrap;
flex-flow
- flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
2.2 应用在flex-item中的属性
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
order
- order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。(不常用)
.item {
order: <integer>;
}
flex-grow
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
flex-shrink
- flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。负值对该属性无效。
felx-basis
- 就是设置item在主轴方向的宽度，如果同时设置宽度有设置这个以这个为准.
flex
- flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
