flex布局
<style>
div{
/* 必须并且只能给父元素添加 */
display: flex;
/* flex-direction设置主轴方向 默认的主轴是x轴 默认值是row，从左到右*/
/* flex-direction:row ; */
/* 翻转x轴排列方向 不常用 */
/* flex-direction:row-reverse; */
/* 设置主轴方向为Y轴 就是从上到下 */
/* flex-direction: column; */
/*justify-content设置子元素在主轴的排列方式 center是居中 */
/* justify-content: center ; */
/* 让子元素平均分配父元素的空间 */
/* justify-content: space-around; */
/* 两边贴边然后分配中间的空间 */
/* justify-content: space-between; */
/* 操作侧轴的对齐方式 这只能操作单行*/
/* align-items: center; */
/* flex布局中默认是不换行的 */
/* flex-wrap: wrap; */
/* 因为有了换行所以不能用align-items所以用align-content 来操作侧轴子元素对其方式 */
/* align-content: flex-start;下一行紧贴着上一行 */
/* align-content: space-between;两边贴边然后自动分配中间 */
/* align-content: space-around;在侧轴平均分配父元素的空间 */
/* 这是把设置主轴方向和换行综合到一起了 */
flex-flow: row wrap;
width: 800px;
height: 500px;
background-color: #3b3b3b;
}
div span{
margin: 10px;
width: 150px;
height: 100px;
background-color: chartreuse;
flex: 0 1 auto;
}
</style>
Flex-项目的属性(子元素)
- 项目的属性规定的是项目在flex容器中的属性
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
1、order
- 作用：定义项目的排列顺序
- 取值：integer
2、flex-grow
- 作用：定义项目的放大比例，默认是0，即如果存在剩余空间，也不放大
- 取值：> 0
- 默认值为0，默认不会自动放大
- 如果都设置为1，那么所有项目会平分剩余的空间
- 如果有三个元素，一个设置为2，剩余为1，那么项目2的就会占一半，剩下两个会各占四分之一。
- 如果有三个元素，一个width设置为200，剩余都为1，那么剩余的会平分固定宽度200之外的空间
3、flex-shrink
- 作用：定义项目的缩放比例，和grow相反
- 取值：>0
- 默认值为1，默认会自动缩小
- 如果所有项目都为1，当空间不足时候，都会等比例缩小
- 如果有一个项目为0，其他都为1，当空间不足时候，0不变，1都缩小
4、flex-basis
- 作用：定义分配多余空间之前，项目占据的主轴空间，和width差不多，但是比width优先级高
5、flex
- 作用：flex-grow、flex-shrink、flex-basis的简写
- 默认值：0 1 auto
6、align-self
- 作用：允许项目有和其他项目不一样的对齐方式，可以覆盖父元素的align-items属性
- 取值：和align-items多了个auto
- 默认值为auto，表示继承align-items属性
