博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
flex布局
阅读量:6520 次
发布时间:2019-06-24

本文共 543 字,大约阅读时间需要 1 分钟。

1. flex是什么

flex是display属性的一个值,display还有其他值,如block,inline-block,inline等。

块状元素的写法

display:flex

行内元素的写法

display:inline-flex

webkit必须加前缀

display:-webkit-flex

注意:被flex修饰的元素和其子元素的float,clear,vertical-align属性自动失效。

2. 基本概念

主轴;交叉轴;main start;main end;cross start;cross end;main size; cross size。

3. flex-container

六个属性:

方向:flex-direction是否换行:flex-wrap缩写:flex-flow主轴位置:justify-content交叉轴位置:align-items多个交叉轴(超过一行)时:align-content

4. flex-item

六个属性:

顺序:order放大:flex-grow缩小:flex-shrink基本大小:flex-basis缩写:flex覆盖align-items:align-self

其中单词:justify整理对齐;shrink收缩

转载地址:http://clrfo.baihongyu.com/

你可能感兴趣的文章