无法在这个位置找到: lyuid_tpl_1683a9f6g8b6f2a71_file/meta.htm 无法在这个位置找到: lyuid_tpl_1683a9f6g8b6f2a71_file/pubcss.htm 无法在这个位置找到: lyuid_tpl_1683a9f6g8b6f2a71_file/menu.htm
无法在这个位置找到: lyuid_tpl_1683a9f6g8b6f2a71_file/top.htm
无法在这个位置找到: lyuid_tpl_1683a9f6g8b6f2a71_file/head.htm

[ flex ] 弹性盒子

时间:2020-09-19 21:33来源:www.lyuid.com 作者:前沿视觉网 点击:
V1.1.1 [ flex ] 弹性盒子 # flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。 class 描述 源码/例子 fx 转为块级弹性盒子。设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。 display:flex infx 转为内联弹性盒子。设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。 display:inline-flex fx-ac 元素水平居中,元素位于容器的中心。弹性盒子元素在该行的侧轴(纵轴)上居中放置。(如果该行的尺寸小于弹性盒子元素的尺寸,则会向两个方向溢出相同的长度)。 align-items: center; fx-jc 元素垂直居中,项目位于容器的中心。 justify-content: center; fx-cc 元素水平垂直居中 justify-content: center;align-items: center; fx-just-start 默认值。项目位于容器的开头 justify-content: flex-start fx-just-end 项目位于容器的结尾。 justify-content: flex-end fx-ali-stretch 默认值。元素被拉伸以适

V1.1.1 [ flex ] 弹性盒子#

flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。
class 描述 源码/例子
fx 转为块级弹性盒子。设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。 display:flex
infx 转为内联弹性盒子。设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。 display:inline-flex
fx-ac 元素水平居中,元素位于容器的中心。弹性盒子元素在该行的侧轴(纵轴)上居中放置。(如果该行的尺寸小于弹性盒子元素的尺寸,则会向两个方向溢出相同的长度)。 align-items: center;
fx-jc 元素垂直居中,项目位于容器的中心。 justify-content: center;
fx-cc 元素水平垂直居中 justify-content: center;align-items: center;
fx-just-start 默认值。项目位于容器的开头 justify-content: flex-start
fx-just-end 项目位于容器的结尾。 justify-content: flex-end
fx-ali-stretch 默认值。元素被拉伸以适应容器。如果指定侧轴大小的属性值为'auto',则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸,但同时会遵照'min/max-width/height'属性的限制。 align-items: stretch
fx-ali-start 元素位于容器的开头。弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴起始边界 align-items: flex-start
fx-ali-end 元素位于容器的结尾。弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴结束边界。 align-items: flex-end
fx-ali-baseline 元素位于容器的基线上。如弹性盒子元素的行内轴与侧轴为同一条,则该值与'flex-start'等效。其它情况下,该值将参与基线对齐。 align-items: initial
fx-ali-int 从父元素继承该属性 align-items: inherit
fx-just-center 项目位于容器的中心 justify-content: center
fx-just-between 项目位于各行之间留有空白的容器内。 justify-content: space-between
fx-just-around 项目位于各行之前、之间、之后都留有空白的容器内。 justify-content: space-around
fx-self-auto 默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 stretch align-self: auto
fx-self-stretch 元素被拉伸以适应容器。如果指定侧轴大小的属性值为'auto',则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸,但同时会遵照'min/max-width/height'属性的限制。 align-self: stretch
fx-self-center 元素位于容器的中心。弹性盒子元素在该行的侧轴(纵轴)上居中放置。(如果该行的尺寸小于弹性盒子元素的尺寸,则会向两个方向溢出相同的长度)。 align-self: center
fx-self-start 元素位于容器的开头。弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴起始边界。 align-self: flex-start
fx-self-end 元素位于容器的结尾。弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴结束边界。 align-self: flex-end
fx-self-basline 元素位于容器的基线上。如弹性盒子元素的行内轴与侧轴为同一条,则该值与'flex-start'等效。其它情况下,该值将参与基线对齐。 align-self: baseline
fx-self-inl 设置该属性为它的默认值 align-self: initial
fx-self-int 从父元素继承该属性。 align-self: inherit
fx-dir-row 默认值。灵活的项目将水平显示,正如一个行一样。 flex-direction: row
fx-row-re 与 row 相同,但是以相反的顺序。 flex-direction: row-reverse
fx-dir-c 灵活的项目将垂直显示,正如一个列一样。 flex-direction: column
fx-dir-cr 与 column 相同,但是以相反的顺序。 flex-direction: column-reverse
fx-dir-inl 设置该属性为它的默认值。 flex-direction: initial
fx-dir-int 从父元素继承该属性。 flex-direction: inherit

前端UI框架,UI框架组件,小程序组件,Lyuif前端框架专注于高效UI解决方案.lyuif是一款HTML/CSS前端框架,高效组件搭配lyui基因碎片化组合完美适配设计稿以及迭代更新,高效前端开发解决方案
无法在这个位置找到: lyuid_tpl_1683a9f6g8b6f2a71_file/footer.htm
无法在这个位置找到: lyuid_tpl_1683a9f6g8b6f2a71_file/side.htm 无法在这个位置找到: lyuid_tpl_1683a9f6g8b6f2a71_file/footbar.htm 无法在这个位置找到: lyuid_tpl_1683a9f6g8b6f2a71_file/pubjs.htm