Flex布局
2017-08-01 本文已影响0人
8d2855a6c5d0
父元素
flex-direction: 主轴方方向
- row
- row-reverse
- column
- column-reverse
justify-content: 主轴方向上子元素排列顺序
- flex-start
- center
- flex-end
- space-around
- space-between
align-items: 副轴上元素的定位
- flex-start
- center
- flex-end
- stretch
- baseline
不常用
flex-wrap:
类似于flex-wrap类似于white-space
- nowrap: 所有的元素都在一行。
- wrap: 元素自动换成多行。
- wrap-reverse: 元素自动换成逆序的多行。
align-content
- flex-start: 多行都集中在顶部。
- flex-end: 多行都集中在底部。
- center: 多行居中。
- space-between: 行与行之间保持相等距离。
- space-around: 每行的周围保持相等距离。
- stretch: 每一行都被拉伸以填满容器。
这可能有些容易混淆，但align-content决定行之间的间隔，而align-items决定元素整体在容器的什么位置。只有一行的时候align-content没有任何效果。
子元素
order: 排序 从0开始 小的排在前面
align-self : 定义元素自己的 纵轴排列方式，可以覆盖 父元素的align-items
flex-basis: flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
flex-grow: flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink: flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex:flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
flex-direction和flex-wrap两个属性经常会一起使用。所以有缩写属性flex-flow。这个缩写属性接受两个属性的值，两个值中间以空格隔开。
display:flex与display:inline-flex的区别
- flex： 将对象作为弹性伸缩盒显示
- inline flex: 将对象作为内联块级弹性伸缩盒显示
<style>
.main{
width: 200px;
background: greenyellow;
display: flex;
}
.main>div{
width: 50px;
height: 50px;
border: 1px solid red;
box-sizing: border-box;
}
</style>
<div class="main">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
display:flex情况下添加一个<div>5</div>效果如下，容器的宽度依然是200px
display:inline-flex情况下添加一个<div>5</div>效果如下，容器的宽度变为250px
display:inline-flex后容器会根据子元素所有的div大小自适应宽度和高度
