flex弹性布局
2019-07-20 18:00
1196 查看
以下是弹性布局的一些知识点,很简单,易懂!
语法:属性:display
取值:
- flex:当前元素充当弹性布局的容器,并且本身以块级元素显示。
- inline-flex:当前元素充当弹性布局的容器,并且本身以行内元素显示。
概念:
- 容器:容纳弹性布局中子元素的父元素。
- 项目:容器中的子元素
注意:元素一旦变为弹性布局的元素后,float,clear,vertical-align,text-align都失效,定位属性是有效的!
接下来就是弹性布局的核心:弹性布局的属性。弹性布局的属性分为容器的属性和项目的属性。
容器的属性:
- flex-direction:定义容器的主轴方向 row 默认,主轴水平,从左到右
- row-reverse主轴水平,从右到左
- column主轴垂直,从上到下
- column-reverse主轴垂直,从下到上
-
norwap:默认不换行,项目自压缩
-
flex-start:在轴的起点对齐
-
flex-start:在轴的起点对齐
-
flex-start:在轴的起点对齐
项目的属性:
- order:顺序,取值为整数,默认所有项目取值为0,取值越小越往前。
- flex-grow:如果容器有剩余空间,定义项目的放大比例,将剩余空间分配给具有此属性的元素,按比例分配。
- flex-shrink:如果容器有空间不足,定义项目的缩小比例。默认为1,取值为0,不压缩。
- flex-basis:定义在主轴上的大小,可以覆盖width/height,默认为auto。
- flex:以上3个属性的综合
- align-self:设置当前这个项目的对齐方式,可以覆盖align-items flex-start:在轴的起点对齐
- flex-end:末尾段对齐
- center:居中对齐
- baseline:基线对齐
- stretch:如何项目未设置高度,将占满整个容器
完结!!!
相关文章推荐
- CSS3--弹性布局flexbox
- display:flex弹性布局
- 我对flex弹性布局的认识
- Flex 弹性盒子布局使用教程
- CSS学习笔记 —— flex 弹性盒子布局
- flex弹性布局学习笔记
- flex:多栏多列弹性布局
- flexbox弹性盒子布局
- Flex弹性布局
- css3弹性布局——display:flex
- Flex弹性布局简单理解
- flex弹性布局总结
- css 之 flex 弹性布局浅浅的理解
- flex弹性布局
- Flex布局又称弹性布局
- 第六章2:弹性布局语法(比CSS盒模型更方便、优化的Flex 布局语法)
- 弹性布局flex:1详解
- css3之flex弹性布局
- 基于flex弹性布局头尾固定,中间滚动效果实现
- FLEX弹性布局教程:语法篇