这是我参与「第四届青训营 」笔记创作活动的的第二天
flex布局初识
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
<style>
div {
display: flex;
width: 80%;
height: 300px;
background-color: pink;
}
div span {
height: 100px;
background-color: skyblue;
margin-right: 5px;
flex: 1;
}
</style>
设置父盒子为flex,子盒子flex:1，则可以对容器进行平均分配。
flex布局原理
flex是flexible Box的缩写，意思是弹性布局。任何一个容器都可以指定为flex布局。采用flex布局的元素成为flex容器，它的所有子元素自动成为容器成员。
注意：当父盒子设置为flex布局后，子元素的float、clear和vertical-align属性将失效。
flex布局父项常见属性
- flex-direction:设置主轴的方向 （重要）
- row 默认值从左到右
- row-reverse 从右到左
- colomn 从上到下
- column-reverse 从下到上
- justify-content:设置主轴上的子元素排列方式 （重要）
- flex-start 默认值从头部开始
- flex-end 从尾部开始排列
- center 在主轴居中对齐
- space-around 平分剩余空间
- space-between 先两边贴边 再平分剩余空间 （重要）
- flex-wrap:设置子元素是否换行,默认情况不换行，如果装不下，会将原来子元素进行缩小显示
- nowrap 默认值，不换行
- wrap 换行
- align-items:设置侧轴上的子元素排列方式（单行）
- flex-start 默认值从上到下
- flex-end 从下到上
- center 挤在一起居中（垂直居中）
- stretch 拉伸
- align-content:设置侧轴上的子元素的排列方式（多行）,只能用于子项出现换行的情况，在单行是没有效果的
- flex-start 默认值在侧轴的头部开始排列
- flex-end 在侧轴的尾部开始排列
- center 侧轴中间
- space-around 子项在侧轴平分剩余空间
- space-between 子项在侧轴先分布在两头，再平分剩余空间
- stretch 设置子项元素高度平分父元素高度
- flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap
flex布局子项常见属性
-
flex属性：定义子项分配剩余空间，用flex来表示占多少分数。
- flex: 1;
-
align-self 控制子项自己在侧轴上的排列方式
-
order 属性定义项目的排列顺序,数值越小，排列越靠前,默认为0
- order:-1;
