弹性布局

172 阅读6分钟

CSS 选择器

传统布局属性

  1. display

  2. flex

  3. positon

Flex&Grid

Flex 布局是轴线布局,只能指定"项目"针对轴线的位置,可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列",产生单元格,然后指定"项目所在"的单元格,可以看作是二维布局。Grid 布局远比 Flex 布局强大。

Flex

www.ruanyifeng.com/blog/2015/0…

  • flex-direction

    • row(默认值):主轴为水平方向,起点在左端。
    • row-reverse:主轴为水平方向,起点在右端。
    • column:主轴为垂直方向,起点在上沿。
    • column-reverse:主轴为垂直方向,起点在下沿。
  • flex-wrap

    • nowrap(默认):不换行。
    • wrap:换行,第一行在上方。
    • wrap-reverse:换行,第一行在下方
  • flex-flow

    属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap

    flex-flow: <flex-direction> || <flex-wrap>;
    
  • justify-content

    • flex-start(默认值):左对齐
    • flex-end:右对齐
    • center: 居中
    • space-between:两端对齐,项目之间的间隔都相等。
    • space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
  • align-items

    • flex-start:交叉轴的起点对齐。
    • flex-end:交叉轴的终点对齐。
    • center:交叉轴的中点对齐。
    • baseline: 项目的第一行文字的基线对齐。
    • stretch(默认值):如果项目未设置高度或设为 auto,将占满整个容器的高度。
  • align-content

    ​ 对于只有一行的 flex 元素,align-content 是没有效果的

    • flex-start:与交叉轴的起点对齐。

    • flex-end:与交叉轴的终点对齐。

    • center:与交叉轴的中点对齐。

    • space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。

    • space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。

    • stretch(默认值):轴线占满整个交叉轴。

      align-content`属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用

项目的属性

  • order

    顺序

  • flex-grow

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

    如果所有项目的flex-grow属性都为 1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为 2,其他项目都为 1,则前者占据的剩余空间将比其他项多一倍。

  • flex-shrink

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

    如果一个项目的flex-shrink属性为 0,其他项目都为 1,则空间不足时,前者不缩小。(不缩放,不会换行)

  • flex-basis 分配剩余空间之前,项目的占据的大小

    • flex-basis: <length> | auto;
      
  • flex

    flex属性是flex-grow, flex-shrinkflex-basis的简写,默认值为0 1 auto。后两个属性可选。

    flex 不同取值对应的情况:

    1. flex 取值为 none,则计算值为 0 0 auto;
    2. flex 取值为 auto,则计算值为 1 1 auto。
    3. flex 取值为一个非负数字,则该数字为 flex-grow 值,flex-shrink 取 1,flex-basis 取 0%。
    4. flex 取值为一个长度或百分比,则视为 flex-basis 值,flex-grow 取 1,flex-shrink 取 1。
    5. flex 取值为两个非负 数字,则分别视为 flex-growflex-shrink 的值,flex-basis 取 0%。
    6. flex 取值为一个非负数字和一个长度或百分比,则分别视为 flex-growflex-basis 的值,flex-shrink 取 1。
  • align-self

    • 该属性可能取 6 个值,除了 auto,其他都与 align-items 属性完全一致。

    •   auto | flex-start | flex-end | center | baseline | stretch;
      

CSS3 响应式布局: @media (min/max-width:***) @font-face

块级元素

1.行内元素:不独占一行,不能设置宽高 2.块级元素:独占一行,能设置宽高 3.行内块元素:不独占一行,但可以设置宽高

box-sizing

  • content-box 是默认值。如果你设置一个元素的宽为 100px,不包括 padding,border,margin。
  • border-box 宽带包括 padding,border,不包括 margin。

box-shadow

/_ x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 _/ box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

居中

margin:0 auto 是用于 block 的,无法用于 inline-block。

inline-block 要居中就更简单了,只需要父级元素设置 text-align:center;

Grid

grid-template-columns属性定义每一列的列宽

grid-template-rows属性定义每一行的行高

除了使用绝对单位,也可以使用百分比。

repeat(3,33.3%) # 33.3% 33.3% 33.3%
repeat(3,10px 20px) # 10px 20px 10px 20px
repeat(auto-fill,100px) #每列宽度100px,然后自动填充,直到容器不能放置更多的列
fr # 占比
minmax(100px, 1fr) # 最小100px 最大1fr
auto # 浏览器自己决定
grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4]; # 网格线命名

间隔

column-gap
row-gap
gap: <row-gap> <column-gap>

grid-template-areas

grid-template-areas:
  'a b c'
  'd e f'
  'g h i';

grid-auto-flow

grid-auto-flow: column | row | row dense(紧密排列);

justify-items align-items place-items

设置单元格内容的水平位置

place-items: <align-items> <justify-items>;
  • start:对齐单元格的起始边缘。
  • end:对齐单元格的结束边缘。
  • center:单元格内部居中。
  • stretch:拉伸,占满单元格的整个宽度(默认值)。

justify-content align-content place-content

是整个 grid 在父容器里面的水平位置

justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
align-content: start | end | center | stretch | space-around | space-between | space-evenly;
place-content: <align-content> <justify-content>;

space-around 和 space-evently 的区别

space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与容器边框的间隔大一倍。

space-evently:项目与项目的间隔相等,项目与容器边框之间也是同样长度的间隔。

grid-template 属性 grid 属性

grid-template简写

grid-template-columns

grid-template-rows

grid-template-areas

grid属性简写

grid-template-rows

grid-template-columns

grid-template-areas

grid-auto-rows

grid-auto-columns

grid-auto-flow

项目属性

  • grid-column-start属性:左边框所在的垂直网格线
  • grid-column-end属性:右边框所在的垂直网格线
  • grid-row-start属性:上边框所在的水平网格线
  • grid-row-end属性:下边框所在的水平网格线
.item-1 {
  grid-column-start: header-start; # 指定为网格线的名字。
  grid-column-end:  span 2;;# 表示"跨越",即左右边框(上下边框)之间跨越多少个网格。
}

grid-column grid-row

.item {
  grid-column: <start-line> / <end-line>;
  grid-row: <start-line> / <end-line>;
}

grid-area

.item-1 {
  grid-area: e; # 指定项目放在哪一个区域。
  grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
}

justify-self align-self place-self

设置单元格内容的水平位置

.item {
  justify-self: start | end | center | stretch;
  align-self: start | end | center | stretch;
  <align-self> <justify-self>;
}