flex布局
一、了解flex
1.flex是什么?
- flex 是 Flexible Box 的缩写,就是弹性盒子布局的意思
2.flex的作用是什么?
- flex弹性盒子的作用是快速定位元素的位置和设置元素大小,适配不同屏幕宽度,最适合移动端。
二、介绍属性
1.flex 父容器属性
/*Flex容器属性 (父容器属性)*/
.parent{
display:flex;
/* 改变主轴方向 */
flex-direction:row;
/* 子元素超出是否|如何换行 */
flex-wrap: wrap;
/* 前俩个属性结合 */
flex-flow: column wrap;
/* 子元素在主轴的对其方式和分布 */
justify-content: left;
/* 交叉轴子元素对其方式 和分布*/
align-items: center;
}
2.flex 子元素属性
.child{
/* 定义子元素排列顺序 值越小越靠前*/
order: 0;
/* 确定子元素的放大比例 */
flex-grow:0;
/* 确定子元素的缩放比例 */
flex-shrink:1;
/* 在分配多余空间之前,子元素占据主轴空间 */
flex-basis: 1;
/* 上面三个属性合并 */
flex:1;
/* 该子元素和其他子元素不同的排列方式 */
/* 继承 */
align-self:auto;
}