02、React系列之--FlexBox
本篇demo下载地址https://github.com/githubchen001/react-lesson/tree/master/lesson01/01-flexbox FlexBox1、什么是FlexBox
2、一些基本知识在Flex布局中,Flex是由”容器”(flex container)和它的孩子(子元素)”flex item”,组成,我们来看一张图 容器默认有两根轴,主轴(main axis)和侧轴(cross axis),默认情况下主轴的方向是水平方向,侧轴是垂直方向。 我们来大概说说这几个概念吧:
主轴是确定子元素(flex-item)的排列方式,默认是水平的。
主轴的开始位置(main start),结束位置(main end)
默认是垂直方向,我们可以设置元素垂直居中,等等
侧轴的开始位置(corss-start)和结束位置(cross-end)
单个flex-item占据主轴的空间叫main size,占侧轴的空间叫corss size 3、Flex窗口的属性
4、容器(flex-container)的属性以下七个属性在容器中设置
4.1 display属性
.container { display: flex; /* or inline-flex */ }
注意:设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。 4.2 flex-direction 属性
.container { flex-direction: row | row-reverse | column | column-reverse; }
此属性有四个值:
flex-direction: row
flex-direction: row-reverse
flex-direction: column
flex-direction: column-reverse
4.3 flex-wrap 属性
.container{ flex-wrap: nowrap | wrap | wrap-reverse; }
此属性有三个值,默认是nowrap
flex-wrap: nowrap;
flex-wrap: wrap;
flex-wrap: wrap-reverse;
4.4 flex-flow属性
flex-flow: <‘flex-direction’> || <‘flex-wrap’>
默认值是:row nowrap,这个没有什么好说的,可以自行试验 4.5 justify-content属性
.container { justify-content: flex-start | flex-end | center | space-between | space-around; }
此属性有五个值
.container { justify-content: flex-start; }
.container { justify-content: flex-end ; }
.container { justify-content: center ; }
.container { justify-content: space-between ; }
.container { justify-content: space-around; }
4.6 align-items属性
.container { align-items: flex-start | flex-end | center | baseline | stretch; }
此属性有五个值
align-items: flex-start ;
align-items: flex-end ;
align-items: center ;
align-items: baseline ;
align-items: stretch ;
4.7 align-content属性
.container { align-content: flex-start | flex-end | center | space-between | space-around | stretch; }
此属性有6个值
align-content: flex-start;
align-content: flex-end;
align-content: center;
align-content: space-between;
align-content: space-around;
align-content: stretch;
5、项目(flex-item的,即子元素)的属性以下六个属性在项目(flex-item)中设置
5.1 order属性
.item { order: <integer>; }
如图所示,这没有什么好说的。 5.2 flex-grow属性
.item { flex-grow: <number>; /* default 0 */ }
如图所示,其实就是每个项目所占的比例 5.3 flex-shrink属性
.item { flex-shrink: <number>; /* default 1 */ }
5.4 flex-basis属性
.item { flex-basis: <length> | auto; /* default auto */ }
5.5 flex属性
.item { flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] }
推荐优先使用这个属性,而不是三个属性单独去写。 5.6 align-self属性
.item { align-self: auto | flex-start | flex-end | center | baseline | stretch; }
注意:align-self取值为auto值时,flex项目对齐方式会根据其父元素align-items来决定。如果其元素设置为stretch值时或没有父元素时,align-self的值为auto时将无对齐方式一说。 demo下载地址:https://github.com/githubchen001/react-lesson/tree/master/lesson01/01-flexbox 关于我我的简书:http://www.jianshu.com/u/3106a1da401f (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |