flexbox是Flexible Box的缩写, 弹性盒子布局, 主流的浏览器都支持
flexbox布局是伸缩容器(container)和伸缩项目(item)组成
Flexbox布局的主体思想是元素可以改变大小以适应可用空间, 当可用空间变大, flex元素将伸展大小以填充可用空间, 当flex元素超过可用空间时, 将自动缩小, 总之, flex元素是可以让你的布局根据浏览器的大小变化进行自动伸缩
按照伸缩流的方向进行布局
伸缩容器有主轴和交叉轴组成, 主轴既可以是水平轴也可以是垂直轴
flexbox目前还处于草稿状态, 所有在使用flexbox布局的时候, 需要加上各种浏览器的私有前缀, 即-webkit -moz -ms -o等
web中flexbox的使用
伸缩容器的属性: 默认值都是第一个
1.display
display: flex | inline-flex
块级伸缩容器 行内级伸缩容器
2.flex-direction
指定主轴的方向, flex-direction:row | row-reverse | column | column-reverse
3.flex-wrap
伸缩容器在主轴方向空间不足的情况下, 是否换行以及该如何换行
flex-wrap: nowrap | wrap | wrap-reverse
4.flex-flow
是flex-direction 和 flex-wrap的缩写版本, 它同时定义了伸缩容器的主轴和侧轴, 其默认值为row nowrap ( flex-flow: row nowrap;)
5.justify-content
用来定义伸缩项目在主轴的对齐方式, 语法为:
justify-content: flex-start | flex-end | center | space-between | space-around
6.align-items
用来定义伸缩项目在交叉轴上面的对齐方式, 语法为:
align-items: flex-start | center | flex-end | baseline | stretch |
7.align-content
用来调整伸缩项目出现换行后在交叉轴上的对齐方式, 语法为:
align-content: stretch | flex-start | flex-end | center | space-between | space-around
所以肯定先要换行, 跟justify-content差不多
伸缩项目的属性
1.order
定义项目的排列顺序, 数值越小, 排列越靠前, 默认值为0, 语法为:
order: 整数值;
2.flex-grow
定义伸缩项目的放大比例, 默认值为0, 即表示如果存在剩余空间, 也不放大, 语法为:
flex-grow: 整数值;
3.flex-shrink
定义伸缩项目的收缩能力, 默认值为1, 语法为:
flex-shrink: 整数值;
4.flex-basis
用来设置伸缩项目的基准值, 剩余的空间按比率进行伸缩, 其语法为:
flex-basis: length | auto, 默认值为auto
5.flex
是flex-grow flex-shrink flex-basis这三个属性的缩写, 语法为:
flex: none | flex-grow flex-shrink flex-basis, 其中第二个和第三个参数为可选参数, 默认值为0, 1, auto
6.align-self
用来设置单独的伸缩项目在交叉轴上的对齐方式, 会覆盖默认的对齐方式, 语法为:
align-self: auto | flex-start | flex-end | center | baseline | stretch
(stretch 伸缩项目在交叉轴方向占满伸缩容器, 如果交叉轴为垂直方向的话, 只有在不设置高度的情况下, 才能看到效果)
react-native使用flexbox
RN目前主要支持flexbox的如下属性:
1.alignItems
用来定义伸缩项目在交叉轴上的对齐方式, 语法为:**
alignItems: flex-start | flex-end | center | stretch **
2.alignSelf
用来设置单独的伸缩项目在交叉轴上的对齐方式, 会覆盖默认的对齐方式, 语法为:
alignSelf: auto | flex-start | flex-end | center | stretch
(stretch 伸缩项目在交叉轴方向占满容器, 如果交叉轴为垂直方向的话, 只有在不设置高度的情况下, 才能看到效果)
3.flex
是flex-grow flex-shrink flex-basis这三个属性的缩写, 其语法为:
flex: none | flex-grow flex-shrink flex-basis , 其中第二个和第三个参数为可选参数, 默认值为:0 1 auto
4.flexDirection**
指定主轴的方向, 语法:
flexDirection: row | row-reverse | column(默认值) | column-reverse
5.flexWrap
伸缩容器在主轴方向空间不足的情况下, 是否换行以及该如何换行
flexWrap: nowrap | wrap | wrap-reverse
6.justifyContent
用来定义伸缩项目在主轴的对齐方式, 语法为:
justifyContent: flex-start | flex-end | center | space-between | space-around
网友评论