1. 中国网页设计首页
  2. 教程
  3. 网页制作

Flex布局“弹性盒子”

一.概念

flex布局:

Flex Box 的缩写,意味“灵活的盒子”或“弹性盒子”,所以flex布局又称“弹性布局”。

  • flex容器

采用flex布局的元素,成为flex容器。display:flex;

  • flex项目

flex容器的所有子元素自动成为容器成员,称为flex项目。

<div style=“ display:flex;”>
  <img >
  <div></div>
  <p></p>
  <p> <a></a></p>
</div>

注:<a>不是项目,如果想让<a>成为项目可以给其父元素<p>添加display:flex;

<style>
 ul{list-style-type: none;}
 li{width: 100px; text-align: center;}
 a{text-decoration: none;}
 ul{display: flex;}     /*可以让垂直导航变水平  因为项目默认沿主轴排列*/
</style>
<body>
 <ul>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#">6</a></li>
 </ul>
</body>

二.属性

Flex布局“弹性盒子”

容器属性:

display                是否flex布局

flex-direction       主轴方向

flex-wrap             是否换行

flex-flow               flex-firection/flex-wrap的缩写

justify-content      项目在主轴上的对齐方式

align-items           项目在交叉轴上的对齐方式

align-content        许多行项目整体在交叉轴上的对齐方式

  • display

是否使用flex布局。

display :flex / inline-flex;

Flex:将元素作为块级弹性伸缩盒显示;

inline-flex:将元素作为内联块级弹性伸缩盒显示。

  • flex-direction

决定主轴的排列方向,即项目的排列方向。

flex-direction : row / row-reverse / column / column-reverse;

row:水平(左到右)默认

row-reverse:反转水平(右到左)

column:垂直(上到下)

column-reverse:反转垂直(下到上)

  • flex-wrap

如果项目沿主轴一行排不了,决定是否换行。

flex-wrap : nowrap / wrap / wrap-reverse;

nowrap :默认 不换行 平均压缩每一个项目排满一行

wrap :正向换行 (第一行在上方)

wrap-reverse:反向换行(第一行在下方)

  • flex-flow

是flex-direction和flex-wrap的缩写。

flex-flow : flex-direction flex-wrap;

默认:flex-flow:row nowrap;

  • justify-content

定义项目在主轴上的对齐方式。

justify-content : flex-start / flex-end / center / space-between / space-around;

flex-start:主轴开始 默认

flex-end:主轴结束

center:主轴中心

space-between:两端对齐,项目中间间隔相等

space-around:每个项目两侧的间隔相等(项目之间的间隔比项目与边框的距离大一倍)

  • align-items

定义在交叉轴上如何对齐。

align-items : flex-start / flex-end / center / baseline / stretch;

flex-start:交叉轴开始

flex-end:交叉轴结束

center:交叉轴中心

baseline:项目的第一行文字的基线对齐

strech:默认  如果项目未设置高度或高度为auto,项目将占满容器的高度

  • align-content

定义多行项目在交叉轴上如何对齐,如果项目只有一个,该属性不起作用。

align-content : flex-start / flex-end / center / space-between / space-around / stretch;

flex-start:整体从交叉轴开始对齐

flex-end:整体从交叉轴结束对齐

center:整体从交叉轴中心对齐,用于设置多行垂直居中

space-between:整体与交叉轴中点对齐,多行之间的间隔平均分配

space-around :每行的上下加个都相等,所以,每行之间的间隔比两端与边框的间隔大一倍。

strech:默认   如果项目未设置高度或高度为auto,项目将占满容器的高度

  • 项目属性:

order:项目的排列顺序

flex-grow:项目放大

flex-shrik:项目缩小

flex-basis:主轴空间

flex:flex-grow flex-shrik flex-basis 的缩写

align-self:单个项目对齐方式

  • order

定义项目的排列顺序,默认为0。

order:数值;

数值越小排列越靠前。

例如,order值为-1的项目排在前面。

  • flex-grow

定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。

如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话);

如果一个项目的flex-grow属性为2,其它为1,则前者占剩余空间将比其它项目多一倍,依次类推;

如果有的项目有flex-grow属性,有的项目有width属性,有flex-grow属性的项目将等分剩余空间。

  • flex-shrink

定义项目的缩小比例,默认为1,即如果空间不足,项目将被缩小。

如果所有项目的flex-shrink属性都为1,当空间不足时,都将被等等比例缩小;

如果一个项目的flex-shrink属性为0,其它项目都为1,则空间不足时,前者不缩小;

注意负值对该属性无效。

  • flex-basis

定义了项目占据的主轴空间(main-size)。

如果主轴为水平,效果跟width一样;

如果主轴为垂直,效果跟height一样;

如果同时设置,flex-basis优先级高于width/height;

默认值为auto,即项目本来width/height。

  • flex

是flex-grow flex-shrik flex-basis 的缩写,默认值为 0 1 auto;

后2个属性值可选,即flex:1;等同于flex:1 1 auto;

该属性有两个快捷值auto(1 1 auto)、none(0 0 auto)。

  • align-self

设置单个项目与其它项目不一样交叉轴上的对齐方式,即可覆盖align-items属性。

ü默认值为auto,表示继承父元素(即flex容器)的align-items属性,如果没有,等同于strech。

üalign-self:auto / flex-start  / flex-end / center / baseline / stretch;

 

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/5769.html