弹性盒子
一般给flex-basis值为0,让它为正值,进而激活了第一个参数(flex-grow ),第二个参数( flex-shrink )可随意填写;此处第一个参数建议参考美工值。
行内块元素如果有一个设置了margin-top属性,则他的同级行内块也会跟着浮动。
flex:none | <' flex-grow '> <' flex-shrink >'? || <' flex-basis '
复合属性。设置或检索弹性盒模型对象的子元素如何分配空间;flex可以使元素具有弹性,让元素可以随页面大小的改变而改变;
弹性盒子可以在变成弹性项的情况下,同时设置成为弹性盒子。
none:none关键字的计算值为: 0 0 auto <' flex-grow '>:用来指定扩展比率,即剩余空间是正值时此「flex子项」相对于「flex容器」里其他「flex子项」能分配到空间比例。 在「flex」属性中该值如果被省略则默认为「1」 <' flex-shrink '>:用来指定收缩比率,即剩余空间是负值时此「flex子项」相对于「flex容器」里其他「flex子项」能收缩的空间比例。 在收缩的时候收缩比率会以伸缩基准值加权 在「flex」属性中该值如果被省略则默认为「1」 <' flex-basis '>:用来指定伸缩基准值,即在根据伸缩比率计算出剩余空间的分布之前,「flex子项」长度的起始数值。 在「flex」属性中该值如果被省略则默认为「0%」 在「flex」属性中该值如果被指定为「auto」,则伸缩基准值的计算值是自身的 <' width '> 设置,如果自身的宽度没有定义,则长度取决于内容。
弹性盒子和浮动的应用相差不多,但是它不会改变原标签的属性只会在原标签的基础上叠加样式 。
并不是像display:inline/block一样实现了标签的“变性处理”,他仅仅是在原有基础上叠加了弹性盒子的属性,原有属性和显示方式不发生变化,变化的是一级子项。
应用弹性盒子:块级标签的排版方式,由竖着排将父框排满,变成横着排;默认高度由内容决定;默认高度把父框填满;默认一行排不下不换行;
<htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>弹性盒子</title><style>body, ul { margin: 0; padding: 0; } ul { width: 400px; height: 100px; line-height: 100px; list-style: none; border: 2pxsolidteal; } li { /* width: 100px; height: 100px; */float: left; } .flex { display: flex;/* 设置弹性盒子 */ } /* 针对整合书写的flex:flex-grow flex-shrink flex-basis 当子元素的总长超过父元素的总长是会使用flex-shrink以达到子元素不溢出的现象,反之子元素小于父元素总长度则会扩大以占满父元素;定义的flex-grow和flex-shrink只会有一个生效;其中flex-basis可直接定义子元素的长度 */ulli:nth-child(1) { /* flex-grow: 1; 此处是单独调试属性*//* flex-shrink: 1; */flex: 11200px; background-color: lightcoral; } ulli:nth-child(2) { /* flex-grow: 2; *//* flex-shrink: 2; */flex: 11200px; background-color: lightgoldenrodyellow; } ulli:nth-child(3) { /* flex-grow: 3; *//* flex-shrink: 3; */flex: 11200px; background-color: lightskyblue; } </style></head><body><ulclass="flex"><li>我是1</li><li>我是2</li><li>我是3</li></ul></body></html>
flex-direction
该属性通过定义flex容器的主轴方向来决定felx子项在flex容器中的位置。这将决定flex需要如何进行排列。
flex-direction:row | row-reverse | column | column-reverse 默认值:row 适用于:flex容器 row:主轴与行内轴方向作为默认的书写模式。即横向从左到右排列(左对齐)。 row-reverse:对齐方式与row相反。 column:主轴与块轴方向作为默认的书写模式。即纵向从上往下排列(顶对齐)。 column-reverse:对齐方式与column相反。
注:该属性设置在,flex容器中,对应了上面的那句话,弹性元素也可以成为弹性盒子。
flex-direction:设置row为主轴的话,column就变成了侧轴,相当于x轴和y轴。
flex-warp
该属性控制flex容器是单行或者多行,同时横轴的方向决定了新行堆叠的方向。
flex-wrap:nowrap | wrap | wrap-reverse 默认值:nowrap 适用于:flex容器 取值: nowrap:flex容器为单行。该情况下flex子项可能会溢出容器 wrap:flex容器为多行。该情况下flex子项溢出的部分会被放置到新行,子项内部会发生断行 wrap-reverse:反转 wrap 排列。