flex布局常用
1.flex-direction:决定主轴方向 row:主轴为水平方向。排列为从左至右。 column:主轴为竖直方向。排列为从上至下。 row-reverse:主轴为水平方向。排列为从右至左。 column-reverse:主轴为竖直方向。排列为从下至上。 2.flex-wrap:默认情况,排列在一条线上,即主轴上,flex-wrap决定当排列不下时是否换行以及换行的方式 nowrap:自动缩小项目,不换行。 wrap:换行,第一行在上。 wrap-reverse:换行,第一行在下。 3.justify-content 决定子元素在主轴上的对齐方式 flex-start:左对齐。 flex-end:右对齐。 space-betwenn:两端对齐。 space-around:沿轴线均匀分布。 4.align-items 决定子元素在交叉轴的对其方式 flex-start:顶端对齐。 flex-end:底部对齐。 center:竖直方向居中对齐。 stretch:如子元素未设置高度,子元素将和容器等高对齐。 5.align-content?该属性定义了当有多根主轴时,即子元素不止一行时,多行在交叉轴轴上的对齐方式。注意当有多行时,定义了align-content后,align-items属性将失效 flex-start:左对齐。 flex-end:右对齐。 center:居中对齐。 space- between:两端对齐。 space-around:沿轴线均匀分布。 stretch:各行将根据其flex-grow值伸展以充分占据剩余空间。 ?5.flex-grow 定义了当flex容器有多余空间时,子元素是否放大。默认值为0,即当有多余空间时也不放大;可能的值为整数,表示不同的子元素的放大比例。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |