码迷,mamicode.com
首页 > 其他好文 > 详细

弹性盒属相文档详细介绍

时间:2018-06-02 20:02:37      阅读:158      评论:0      收藏:0      [点我收藏+]

标签:容器   pac   文档   ase   描述   默认   item   reverse   clear   

弹性盒属相文档详细介绍

display:flex;

声明本元素是弹性盒容器

如果目标元素是行内元素 使用display:inline-flex;

flex-direction

取值 描述
row 默认值 ,弹性盒子元素按X轴方向顺序排列
row-reverse 弹性盒子元素按照X轴风向逆序排列
column 弹性盒子元素按照Y轴方向顺序排列
column-reverse 弹性盒子元素按照Y轴方向逆序排列

flex-wrap

取值 描述
nowrap 默认值,flex子元素只会单行显示,flex子元素过多会溢出容器,不会开始新行
wrap flex子元素可以显示多行,超出的部分会放到新行
wrap-reverse flex子元素可以显示多行,只不过会反转显示(不是逆序

justify-content

设置子元素在X轴方向的排列

取值 描述
flex-start 弹性盒子元素以起始元素对齐(类似与不改变子元素顺序的 浮动)
flex-end 弹性盒子元素以结束位置对齐(类似与不改变子元素顺序的浮动)
center 弹性盒子元素向行中间位置显示
space-between 弹性盒子元素平均的分布在行里,第一个与起始位置边界对其,最后一个以结束位置边界对齐
space-around 弹性盒子元素会平均的分布在行里,两端保留了子元素与子元素之间距离大小的一半(两端指得是起始位置结束位置

align-items

设置子元素在X轴方向的排列

取值 描述
flex-start 弹性盒子元素以起始元素对齐
flex-end 弹性盒子元素以结束位置对齐
center 弹性盒子元素向行中间位置显示
baseline 如果弹性盒子元素的行内轴与侧轴为同一条,则该值与flex-start等效,其他情况下,该轴将与参与基线对齐
stretch 如果指定侧轴大小属相值为“auto”,则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸,但同时会遵照“min/max-width/height”属相的限制

order

设置弹性盒子元素出现的顺序 值为: Number

flex

简写方式:flex:1 0 auto;

属相 取值
flex-grow(扩展比率) Number
flex-shrink(收缩比) Number
flex-basis(宽度像素值) Number/auto

align-self

可以覆盖align-items属相用于设置单个子元素如何沿着Y轴排列 (其取值和align-item类似)

取值 描述
flex-start 弹性盒子元素以起始元素对齐
flex-end 弹性盒子元素以结束位置对齐
center 弹性盒子元素向行中间位置显示
baseline 如果弹性盒子元素的行内轴与侧轴为同一条,则该值与flex-start等效,其他情况下,该轴将与参与基线对齐
stretch 如果指定侧轴大小属相值为“auto”,则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸,但同时会遵照“min/max-width/height”属相的限制

flex-flow

flex-flow是flex-wrap和flex-direction的简写,用于排列弹性盒子元素

注意

注意以下属相对弹性盒不起作用

  1. 弹性容器中的每一个子元素变为一个弹性子元素,弹性容器直接包含的文本变为匿名的弹性盒子元素
  2. 多列布局中olumn-*属相对弹性子元素无效
  3. floatclear 对弹性子元素无效。使用float会导致display属相计算为block。
  4. vertical-align 对弹性盒子元素的对齐无效。

本教程中带有小括号的均是个人理解 如有瑕疵,请指出!感谢!!!

弹性盒属相文档详细介绍

标签:容器   pac   文档   ase   描述   默认   item   reverse   clear   

原文地址:https://www.cnblogs.com/ningzy/p/9126340.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!