css面试（2）

豫东吴彦祖
91 阅读4分钟

一 flex布局

1 felx是什么？

Flexible Box 简称 flex，意为”弹性布局”，可以简便、完整、响应式地实现各种页面布局

采用Flex布局的元素，称为flex容器container

它的所有子元素自动成为容器成员，称为flex项目item

核心原理 ：通过给父元素设置felx属性，达到控制子元素的位置和排列方式的目的

2 felx里的主轴和交叉轴（重点理解）

image.png

a : 假如一个元素采用的是felx布局，那么该元素就可以被称为‘容器’---flex container

b : 它的所有子元素都是容器的‘项目’---flex item

c : 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做 main start ，结束位置叫做 main end ；交叉轴的开始位置叫做 cross start ，结束位置叫做 cross end 。

二 容器的属性 ：

关于flex常用的属性，我们可以划分为容器属性和容器成员属性

容器属性有：

  • flex-direction 决定主轴的方向(即项目的排列方向)
  • flex-wrap 弹性元素永远沿主轴排列，那么如果主轴排不下，通过flex-wrap决定容器内项目是否可换行
  • flex-flow 是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
  • justify-content 定义了项目在主轴上的对齐方式
  • align-items 定义项目在交叉轴上如何对齐（不常用）
  • align-content 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用（不常用）

1 flex-direction 决定主轴的方向(即项目的排列方向)

属性对应如下：

  • row（默认值）：主轴为水平方向，起点在左端
  • row-reverse：主轴为水平方向，起点在右端
  • column：主轴为垂直方向，起点在上沿。
  • column-reverse：主轴为垂直方向，起点在下沿

代码实现 ：

<style>
      .container {
        display: flex;
        flex-direction: row | row-reverse | column | column-reverse; 
        width: 200px;
        height: 200px;
        background-color: pink;
      }
      .item {
        width: 60px;
        height: 60px;
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
    </div>
  </body>

对应样式依次为：

display: flex; flex-direction: row | row-reverse | column | column-reverse;

image.png

image.png

image.png

image.png

3.2 flex-wrap 弹性元素永远沿主轴排列，那么如果主轴排不下，通过flex-wrap决定容器内项目是否可换行

属性对应如下：

  • nowrap（默认值）：不换行
  • wrap：换行，第一行在下方
  • wrap-reverse：换行，第一行在上方

默认情况是不换行，但这里也不会任由元素直接溢出容器，会涉及到元素的弹性伸缩 注意 : felx 盒子是默认不换行的，如果一行没有设置 flex-wrap，那么无论增加多少盒子都塞到一行上，方式是缩小这一行每一个子元素大小。详解见下图实现代码配合图示

case 1 原始情况有三个盒子

case 1 原始情况有三个盒子代码
<style>
      .container {
        display: flex;
        flex-direction: row;
        width: 200px;
        height: 200px;
        background-color: pink;
      }
      .item {
        width: 60px;
        height: 60px;
        background-color: blue;
        margin: 5px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
    </div>
  </body>

case 1 原始情况有三个盒子图片示例：

image.png

case 2 增加有一个盒子，但是没有设置 flex-wrap

case 2 增加有一个盒子，但是没有设置 flex-wrap代码

<style>
      .container {
        display: flex;
        flex-direction: row;
        width: 200px;
        height: 200px;
        background-color: pink;
      }
      .item {
        width: 60px;
        height: 60px;
        background-color: blue;
        margin: 5px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
    </div>
  </body>

case 2 增加有一个盒子，但是没有设置 flex-wrap图片示例

image.png

case 3 增加了一个盒子，设置了flex-wrap

case 3 增加了一个盒子，设置了flex-wrap
 <style>
      .container {
        display: flex;
        flex-direction: row;
        width: 200px;
        height: 200px;
        background-color: pink;
        flex-wrap: wrap;
      }
      .item {
        width: 60px;
        height: 60px;
        background-color: blue;
        margin: 5px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
    </div>
  </body>

case 3 增加了一个盒子，设置了flex-wrap示例

image.png

4 justify-content

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

属性对应如下：

  • flex-start（默认值）：左对齐
  • flex-end：右对齐
  • center：居中
  • space-between：两端对齐，项目之间的间隔都相等
  • space-around：两个项目两侧间隔相等

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

case 1 flex-start（默认值）：左对齐

image.png

case 2 flex-end：右对齐

image.png

case 3 center：居中

image.png

case 4 space-between：两端对齐，项目之间的间隔都相等

image.png

case5 space-around：两个项目两侧间隔相等

image.png

三 容器中项目属性 容器成员属性如下：

  • order 定义项目的排列顺序。数值越小，排列越靠前，默认为0

  • flex-grow 上面讲到当容器设为flex-wrap: nowrap;不换行的时候，容器宽度有不够分的情况，弹性元素会根据flex-grow来决定

  • flex-shrink 定义了项目的缩小比例（容器宽度<元素总宽度时如何收缩），默认为1，即如果空间不足，该项目将缩小

  • flex-basis设置的是元素在主轴上的初始尺寸，所谓的初始尺寸就是元素在flex-grow和flex-shrink生效前的尺寸

  • flex``flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto，也是比较难懂的一个复合属性

  • align-self 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性

这里只说一个flex用法：

felx属性是默认分配父元素剩余空间，这个剩余空间是除去了有些子元素已经有的宽度的剩余空间，还有种情况就是父元素里面所有子元素都没宽度，就是均分。

case 1 传说中的圣杯布局，左右固定，中间自适应

圣杯布局代码 ：
  .container {
        display: flex;
        flex-direction: row;
        width: 600px;
        height: 200px;
        background-color: pink;
      }
      .item1 {
        width: 150px;
        height: 60px;
        background-color: red;
        /* margin: 5px; */
      }
      .item2 {
        flex: 1;
      }
      .item3 {
        width: 150px;
        height: 60px;
        background-color: blue;
        /* margin: 5px; */
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item1">1</div>
      <div class="item2">2</div>
      <div class="item3">3</div>
    </div>
  </body>

圣杯布局图片示例： image.png

case 2 所有子元素都没宽度 均分父元素

case 2 所有子元素都没宽度 均分父元素的代码
 .container {
        display: flex;
        flex-direction: row;
        width: 600px;
        height: 200px;
        background-color: pink;
      }
      .item1 {
        height: 60px;
        background-color: red;
        flex: 1;
      }
      .item2 {
        flex: 1;
      }
      .item3 {
        height: 60px;
        background-color: blue;
        flex: 1;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item1">1</div>
      <div class="item2">2</div>
      <div class="item3">3</div>
    </div>
  </body>

case 2 所有子元素都没宽度 均分父元素的代码图片实例

image.png

case 3 指定某个子元素多分

case 3 指定某个子元素多分代码
 <style>
      .container {
        display: flex;
        flex-direction: row;
        width: 600px;
        height: 200px;
        background-color: pink;
      }
      .item1 {
        height: 60px;
        background-color: red;
        flex: 1;
      }
      .item2 {
        flex: 2;
      }
      .item3 {
        height: 60px;
        background-color: blue;
        flex: 1;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item1">1</div>
      <div class="item2">2</div>
      <div class="item3">3</div>
    </div>
  </body>

case 3 指定某个子元素多分代码图片示例

image.png

avatar
文章
阅读
粉丝