flex吃干抹净

Flex 布局是什么？

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

.box{
  display: flex;
  //行内元素也可以使用flex布局
  //display: inline-flex;
}

• display: flex; 使元素呈现为块级元素，占据整行空间，除非使用 width 或 height 等属性指定其大小。所有子元素将按照弹性盒子的规则进行布局。
• display: inline-flex; 使元素呈现为一个行内元素，可以与其他元素在同一行上显示。其子元素也将按照弹性盒子的规则进行布局 。

  设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

  flex属性

  父元素属性

  • flex-direction

    flex-direction属性决定主轴的方向 默认值为row

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

  • flex-wrap

    flex-wrap决定子元素换行 默认值为nowarp

    flex-wrap: nowrap | warp | wrap-reverse

  • flex-flow

    flex-direction和flex-wrap的复合属性 ****row nowrap

    flex-flow: |

  • justify-content属性定义了项目在主轴上的对齐方式；

    justify-content: flex-start | flex-end | center | space-between | space-around

  • align-items属性决定了侧轴上的对齐方式

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

    align-content 多行子容器在交叉轴上的对齐方式,首先的前提是它要满足换行

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

  • gap 属性决定了主轴子元素之间的间隔

    gap:

    子元素属性

    • order : 自定义排序,设置order可以按照由小到大进行排列

      order:

    • align-self 单独设置子容器的交叉轴排列方式

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

    • flex-basis表示当子容器不伸缩的状态时,也就是没有设置 flex: 数字的弹性情况下的原始尺寸,默认为auto,item本来的大小

      flex-basis: | auto

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

      flex-grow:

    • flex-shrink 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
    • flex-shrink:

      flex: 属性是flex-grow, flex-shrink 和 flex-basis的复合属性

      flex: none | [ ? || ]

      flex: 1

      flex:1 = flex: 1 1 0%;

      flex:1在父元素尺寸不足的时候，会优先最小化内容尺寸。

      flex:auto

      flex:auto = flex: 1 1 auto

      flex:auto在父元素尺寸不足的时候，会优先最大化内容尺寸。

      flex: 0

      flex:0 = flex: 0 1 0%;

      flex:0 :通常表现为内容最小化宽度,不会充分的分配容器的尺寸。

      flex:none

      flex:none = flex:0 0 auto;

      flex:none;表示元素的大小由内容决定，但是flex-grow，flex-shrink都是0，元素没有弹性，通常表现为内容最大化宽度,也许会溢出容器。

      所以在日常开发中使用flex:1和 flex:auto比较多

      快速练习和使用

      CSS3 Flexbox 在线演示

      一些布局使用

      全屏布局

      css

      .fullscreen {
      display: flex;
      flex-direction: column;
      width: 100vw;
      height: 100vh;
      }
      header {
      height: 100px;
      background-color: yellow;
      }
      footer {
      height: 100px;
      background-color: black;
      }
      main {
      flex: 1;
      background-color: blue;
      }
      

      圣杯和双飞翼布局

      .grail {
      display: flex;
      height: 100vh;
      width: 100vw;
      }
      .right {
      width: 100px;
      background-color: blue;
      }
      .left {
      width: 100px;
      background-color: red;
      }
      .center {
      flex: 1;
      background-color: yellow;
      }
      

      两列布局(一列固定,一列自适应)

      css

      .two-column {
      display: flex;
      height: 100vh;
      width: 100vw;
      }
      .left {
      width: 100px;
      background-color: blue;
      }
      .right {
      flex: 1;
      background-color: red;
      }
      

      综合案例

      ![[Pasted image 20240106110443.png]]

      css

      body {
      font-size: small;
      height: 100vh;
      width: 100vw;
      margin: 0;
      background-color: rgb(216, 216, 216);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      box-sizing: border-box;
      }
      div {
      border: 1px red solid;
      }
      .container {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      height: 100vh;
      width: 1200px;
      background-color: white;
      /* margin-top: 20px; */
      padding: 30px 40px;
      box-sizing: border-box;
      }
      .part1 {
      height: 100px;
      width: 1100px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      /* margin-top: 10px; */
      }
      .part2 {
      height: 300px;
      width: 1100px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      }
      .part1-left {
      height: 80px;
      width: 300px;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 10px;
      }
      .part1-right {
      height: 80px;
      width: 300px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 20px;
      }
      .part2-top {
      margin-top: 2px;
      width: 800px;
      height: 100px;
      }
      .part2-middle {
      width: 400px;
      height: 100px;
      font-size: 20px;
      }
      .part2-bottom {
      width: 300px;
      height: 100px;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 20px;
      margin-top: 20px;
      }
      .part3 {
      height: 300px;
      width: 1100px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      }
      .part3-top {
      margin-top: 2px;
      width: 600px;
      height: 30px;
      }
      .part3-middle {
      width: 1000px;
      height: 200px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      }
      .part3-bottom {
      margin-bottom: 2px;
      width: 300px;
      height: 50px;
      }
      .card {
      height: 180px;
      width: 180px;
      }
      

      文章到这里就结束了,文章更多作为自我学习,也希望对你有所帮助,有错欢迎指出。