CSS布局

Aman996
166 阅读5分钟

CSS布局

选择布局方式的前提：

一、float布局

1、主要用途：

①float布局主要用于IE浏览器；

2、步骤：

①在子元素上加float:left和width；

②在父元素上加.clearfix；

3、样式示例：

js.jirengu.com/wiwuh/3/edi…

二、flex布局

1、container的样式（容器）

首先需要让一个元素变成flex容器：

.container{
  display:flex； /*or inline-flex*/
}

2、container的属性

①flex-direction

主要作用：改变items流动方向；

.container{
  flex-direction: row | row-reverse | column | column-reverse;
}

注：

  • row:默认值，显示为行。方向为当前文档水平流方向，默认情况下是从左往右。

  • row-reverse:显示为行。但方向和row属性值（方向）是反的。

  • column:显示为列。方向为从上到下排列。

  • column-reverse:显示为列。方向为从下到上排列，与column相反。

②flex-wrap

主要作用：改变items换行；

.container{
  flex-wrap: wrap | nowrap | wrap-reverse;
}

注：

  • nowrap:默认值，表示单行显示，不换行。

  • wrap:宽度不足换行显示。

  • wrap-reverse:宽度不足换行显示，但是是从下往上开始，也就是原本换行在下面的子项现在跑到上面。

③ justify-content

主要作用：主轴对齐方式；

.container{
  justify-content: flex-start | flex-end | center | space-between |     space-around | space-evenly;
}

注：

  • flex-start:默认值。逻辑CSS属性值，与文档流方向相关。默认表现为左对齐。
  • flex-end:逻辑CSS属性值，与文档流方向相关。默认表现为右对齐。
  • center:表现为居中对齐。
  • space-between:表现为两端对齐。between是中间的意思，意思是多余的空白间距只在元素中间区域分配。
  • space-around:around是环绕的意思，意思是每个flex子项两侧都环绕互不干扰的等宽的空白间距，最终视觉上边缘两侧的空白只有中间空白宽度一半。
  • space-evenly:evenly是匀称、平等的意思。也就是视觉上，每个flex子项两侧空白间距完全相等。

④align-items

主要作用：纵轴对齐方式；

.container{
  align-items: flex-start | flex-end | center | stretch | baseline;
}

注：

  • flex-start:默认表现为容器顶部对齐。
  • flex-end:默认表现为容器底部对齐。
  • center:表现为垂直居中对齐。
  • stretch:默认值。flex子项拉伸。
  • baseline:表现为所有flex子项都相对于flex容器的基线对齐。

⑤align-content

主要作用：多行内容的分布；

.container{
  align-content: flex-start | flex-end | center | stretch | space-between |
  space-around | space-evenly;
}

注：

  • flex-start:默认表现为顶部堆砌。
  • flex-end:默认表现为底部堆放。
  • center:表现为整体垂直居中对齐。
  • stretch:默认值。每一行flex子元素都等比例拉伸。
  • spcae-between:表现为上下两行两端对齐。剩下每一行元素等分剩余空间。
  • spcae-around:每一行元素上下都享有独立不重叠的空白空间。
  • space-evenly:每一行元素都完全上下等分。

3、item的样式

①order

主要作用：可以通过设置order改变某一个flex子项的排序位置。

order: <integer>; /* 整数值，默认值是 0 */

注：

  • 所有flex子项的默认order属性值是0。
  • 如想要某一个flex子项在最前面显示，可以设置比0小的整数，如-1。

②flex-grow

主要作用：扩展flex子项所占的宽度，扩展所侵占的空间就是除去元素外的剩余的空白间隙。

flex-grow: <number>; /* 数值，可以是小数，默认值是 0 */

注：

  • flex-grow不支持负值，默认值是0。

  • 如果flex-grow大于0，则flex容器剩余空间的分配就会发生。

  • 所有剩余空间总量是1。

  • 如果只有一个flex子项设置flex-grow属性值：

    如果flex-grow值小于1，则扩展的空间就总剩余空间和这个比例的计算值。

    如果flex-grow值大于1，则独享所有剩余空间。

  • 如果有多个flex设置了flex-grow属性值：

    如果flex-grow值总和小于1，则每个子项扩展的空间就总剩余空间和当前元素设置的flex-grow比例的计算值。

    如果flex-grow值总和大于1，则所有剩余空间被利用，分配比例就是flex-grow属性值的比例。例如所有的flex子项都设置flex-grow:1，则表示剩余空白间隙大家等分，如果设置的flex-grow比例是1:2:1，则中间的flex子项占据一半的空白间隙，剩下的前后两个元素等分。

③flex-shrink

主要作用：处理当flex容器空间不足时候，单个元素的收缩比例。

flex-shrink: <number>; /* 数值，默认值是 1 */

注：

  • flex-shrink不支持负值，默认值是1，也就是默认所有的flex子项都会收缩。

  • 如果设置为0，则表示不收缩，保持原始的fit-content宽度。

  • 如果只有一个flex子项设置了flex-shrink：

    flex-shrink值小于1，则收缩的尺寸不完全，会有一部分内容溢出flex容器。

    flex-shrink值大于等于1，则收缩完全，正好填满flex容器。

  • 如果多个flex子项设置了flex-shrink：

    flex-shrink值的总和小于1，则收缩的尺寸不完全，每个元素收缩尺寸占“完全收缩的尺寸”的比例就是设置的flex-shrink的值。

    flex-shrink值的总和大于1，则收缩完全，每个元素收缩尺寸的比例和flex-shrink值的比例一样。

④align-self

主要作用：指控制单独某一个flex子项的垂直对齐方式。

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

注:

  • align-self多了个auto（默认值），表示继承自flex容器的align-items属性值。其他属性值含义一模一样

⑤flex

说明：flex属性是flex-grow，flex-shrink和flex-basis的缩写。

flex: none | auto | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

其中第2和第3个参数（flex-shrink和flex-basis）是可选的。默认值为0 1 auto。

参考文献：

avatar
文章
阅读
粉丝