CSS position 定位之 Flex

CSS position 定位之 Flex一、Flex是什么Flex是Flexible Box的缩写，意为“弹性盒子”/*块内元素*/display：flex;/*行内元素*/display:inline-flex;二、基本概念容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main

fanfan_fxh

4213人浏览 · 2020-12-04 15:02:22

fanfan_fxh · 2020-12-04 15:02:22 发布

这篇博客是我学习Flex的一个笔记，学习的资源主要来自阮一峰老师博客。博客讲的很清楚，我自己总结之后,更方便理解。

一、Flex是什么

Flex是Flexible Box的缩写，意为“弹性盒子”

/*块内元素*/
display：flex;
/*行内元素*/
display:inline-flex;

二、基本概念

Felx分为容器和项目

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

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

三、容器的属性

以下6个属性设置在容器上。

flex-direction 决定主轴方向，
flex-wrap 定义如果一条轴线排不下，如何换行
flex-flow 前两个的简写
justify-content 定义项目在主轴上的对齐方式
align-items 定义项目在交叉轴上如何对齐
align-content 定义多根轴线的对齐方式，如果只有一根轴线，不起作用

四、项目属性

以下6个属性设置在项目上。

Order 项目的排列顺序
flex-grow 项目的放大比例
flex-shrink 项目的缩小比例
flex-basis 定义在分配多余空间之前，项目占据的主轴空间
Flex 前三个的缩写
align-self 允许单个项目有与其他项目不一样的对齐方式，覆盖align-items属性

五、实际问题

1. 不定宽高如何水平垂直居中？

代码+样式

2. 用flex布局制作航

代码+样式

3. 悬挂式布局

代码+示例

Flex:none;使用场景

4. 多列布局

代码+示例

5. 基本网格布局

HTML代码

<body>
   <div class="body">
     <br>
      <p>第一个布局</p>
      <div class="box">
        <div class="box-cell">1/2</div>
        <div class="box-cell">1/2</div>
      </div>
     <!-- <hr> -->
      <br>
      <p>第二个布局</p>
      <div class="box">
        <div class="box-cell">1/3</div>
        <div class="box-cell">1/3</div>
        <div class="box-cell">1/3</div>
      </div>
      <br>
      <p>第三个布局</p>
      <div class="box">
        <div class="box-cell">1/4</div>
        <div class="box-cell">1/4</div>
        <div class="box-cell">1/4</div>
        <div class="box-cell">1/4</div>
      </div>
      <br>
      <p>第四个布局</p>
      <div class="box">
        <div class="box-cell box-cell1">When in the Course of human events, ......</div>
        <div class="box-cell box-cell1">We hold these truths to be self-evident......</div>
      </div>
   </div>
	</body>

CSS代码

<head>
		<meta charset="utf-8">
		<title></title>
    <style type="text/css">
      .body {
        padding: 30px;
        height: 900px;
        border: 1px solid #333;
      }
      
      .box {
        /* border: 1px solid #333; */
        display: flex;
       /* height: 300px; */
      }
      
      .box-cell {
        margin: 10px;
        background-color: #D6D6D6;
        height: 30px;
        text-align: center;
        line-height: 30px;
        flex: 1;
      }
      
      .box-cell1 {
        height: auto;
      }
    </style>
	</head>

示例

代码+示例

6. 圣杯布局

HTML代码

<body>
    <div class="body">
      <div class="header">header</div>
      <div class="container">
        <div class="left">left</div>
        <div class="content">content</div>
        <div class="right">right</div>
      </div>
      <div class="footer">footer</div>
    </div>
</body>

CSS代码

 <style type="text/css">
      .body {
        display: flex;
        flex-direction: column;
      }
      
      .header,
      .footer {
        background-color: steelblue;
        flex: 1;
        height: 100px;
        text-align: center;
        line-height: 100px;
        font-size: 28px;
      }
      
      .container {
        display: flex;
      }
      
      .container>div {
        border: 1px solid #000000;
        margin: 10px;
        flex: 1;
        text-align: center;
      }
      
      .container .left,
      .container .right {
        flex: 0 0 12em;
      }
      .container .left {
        order: -1;
      }
      

      @media (max-width: 768px) {
        .container {
          flex-direction: column;
          flex: 1;
        }
        
        .container .left,
        .container .right,
        .container .content {
          flex: auto;
        }
      }
      
     
    </style>

示例