弹性布局有两个轴x和y，x为主轴，y为交叉轴，通过flex可以实现改变元素所在位置
属性
display: flex; 在父元素样式中加入此样式
设置元素在主轴上的对齐方式
justify-content: center;
值有：center（主轴中点对齐）、flex-start（主轴起点对齐）、flex-end(主轴终点对齐)、space-around（把剩余的空间均分给项目的左右）、space-between（两端对齐：把剩余的空间均分给项目与项目之间）。
交叉轴对齐方式 align-items: center;
align-items：设置项目在交叉轴上的对齐方式，值有：center（交叉轴中点对齐）、flex-start(交叉轴起点对齐)、flex-end（交叉轴终点对齐）、stretch（项目高度充满容器 ，默认的）、baseline（文字基线对齐）
设置主轴的方向 flex-direction: column-reverse;
/row代表主轴从左向右/
/row-reverse代表主轴从右到左/
/column代表主轴从上到下/
/column-reverse代表主轴从下到上/
如果元素过多默认不会换行，需要手动换行 flex-wrap:wrap;
值有：wrap：换行后，高度均分容器高度。默认。
wrap-reverse：换行后，上下顺序颠倒。
当有多条主轴的情况下，使用align-content设置项目在交叉轴上的对齐方式（只有在有多条主轴的时候才会起作用）。
align-content:center;
值有：flex-start、flex-end、center、space-between、space-around、stretch。
**注意---**当把父元素设置为弹性容器后子元素自动成为inline-flex。默认宽度由内容撑开，高度和容器一致，并可以设置宽高。
flex-grow将容器的空间按子元素的个数进行平分
例：
.box{
border: 1px solid blue;
height: 300px;
display: flex;
}
.box section{
border: 1px dashed red;
flex-grow: 1;将容器box评分为三分，1表示每个占一份。
}结构
<body> <div class="box"> <section>section1</section> <section>section2</section> <section>section3</section> </div></body>
flex-basis：通过这只flex-basis可以设置元素在主轴上占据的空间，通常设置百分比，进行列的划分。
例：
.box section{ border: 1px dashed red; flex-basis: 30%;
}align-self：单独设置元素在交叉轴上的对齐方式
例：
.box section:nth-child(1){ align-self: flex-start;
}order：设置项目的排列序号，可以为负，谁小谁在前(没有设置的默认为0)；
作者：蜗牛1112
链接：https://www.jianshu.com/p/538ee2449bce
共同学习，写下你的评论
评论加载中...
作者其他优质文章
