- 布局原理:通过给父盒子添加flex属性,来控制子盒子的位置和排列方式 。
- 为父盒子设置flex布局后,子元素float、clear、vertical-align属性失效。
- 常见父元素属性:flex-direction设置主轴方向、
- justify-content设置主轴子元素排列方式、
- flex-wrap设置子元素是否换行、
- align-content设置侧轴子元素排列方式多行、
- align-items设置侧轴子元素排列方式单行、
- flex-flow复合属性相当于flex-direction和flex-wrap
- flex-direction属性值row从左到右row-reverse从右到左column从上到下column-reverse从下到上
- justify-content设置主轴子元素排列方式flex-start从头部开始flex-end从尾部开始center居中对齐space-around平分剩余空间space-between先两边在平分剩余空间
- align-items:flex-start从上到下flex-end从下到上center居中stretch拉伸
- flex属性定义子项目分配剩余空间,表示占多少份数
- align-self控制子项自己在侧轴上的排列方式
- order 属性定义项目的排列顺序,数字越小越靠前。
- 线性渐变:linear-gradient(方位,开始颜色,结束颜色)
移动端flex布局知识点归纳总结
猜你喜欢
转载自blog.csdn.net/h_el_lo/article/details/104557946
今日推荐
周排行