flex 原理及使用

流氓也是种气质 _Cookie

已于 2022-11-03 10:25:07 修改

阅读量401

点赞数

分类专栏： css 文章标签： vue.js elementui html

于 2021-06-24 17:15:09 首次发布

本文链接：https://blog.csdn.net/qq_37550440/article/details/118192493

版权

css 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

flex 布局原理：通过给父盒子添加flex属性，来控制子盒子的位置和排列方式

flex-direction: row; 默认x轴为主轴，Y轴为侧轴， flex-direction: column;设置flex-direction: column;Y轴为主轴 x轴为侧轴

一定要分清主轴和侧轴 元素是按主轴排列

1.常见父项属性及子项属性

flex-direction: row | row-reverse |column |column-reverse;
		justify-content: stretch| flex-start| flex-end| center| space-around| space-between|;
		    flex-wrap: nowrap | wrap | wrap-reverse;
		align-content: center| start| end| flex-start| flex-end;
		align-items: stretch|center| start| end;
		flex-flow: row wrap;
		
		align-items:stretch 拉伸|center| start| end;
		order: 1

2.父项属性案例

2.1flex-wrap: wrap 换行

flex-warp 默认不换行，并且会缩下所有元素，保证所有元素在一行显示！

效果图：

代码块：

div {
      display: flex;
      width: 800px;
      height: 400px;
      background-color: pink;
      /* 不换行，并且元素会缩小并且在一行显示 */
      flex-wrap: nowrap;
      /* 换行，元素大小正常显示 */
      /* flex-wrap: wrap; */
    }

    span {
      width: 150px;
      height: 100px;
      margin: 10px;
      background-color: aqua;
    }

<div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>3</span>
    <span>4</span>
  </div>

2.2 align-items: 设置侧轴，子元素的排列方式（针对单行）

效果图：

代码块：

div {
      display: flex;
      width: 800px;
      height: 400px;
      background-color: pink;
      /* 设置侧轴，子元素的排列方式（针对单行） */
      align-items: center;
    }

    span {
      width: 150px;
      height: 100px;
      margin: 10px;
      background-color: aqua;
    }

div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
  </div>

2.3 align-content: 设置侧轴，子元素的排列方式（针对多行 flex-warp:warp）

效果图：

代码块：

div {
      display: flex;
      width: 800px;
      height: 400px;
      background-color: pink;
      /* 换行，元素大小正常显示 */
      flex-wrap: wrap;
      /* 设置侧轴，子元素的排列方式（针对多行） */
      align-content: flex-start;
    }

    span {
      width: 150px;
      height: 100px;
      margin: 10px;
      background-color: aqua;
    }


<div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>3</span>
    <span>4</span>
  </div>

2.4 align-content: stretch 拉伸盒子

ps:搭配min-height才生效

效果图：

代码块：

<style>
    .box {
      display: flex;
      flex-wrap: wrap;
      width: 240px;
      height: 240px;
      background-color: #ccc;
    
      /* 以下二个方法都可以拉伸，item从50px拉伸118px */
      /* 多个盒子更符合语义化  align-content: stretch注释掉也会拉伸盒子的*/
      align-content: stretch; 
      /* align-items: stretch; */

     /*加上反而会固定盒子高度 */
     align-content: center; 
    }

    .item {
      width: 70px;
      /* height: 50px; */
      /* 拉伸必须搭配 min-height使用，height无效 */
      min-height: 50px;
      border: 1px solid #ccc;
      background-color: pink;
    }
  </style>


<div class="box">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
  </div>

2.5 易遇见得布局案例

案例1效果图：

  <style>
    .box {
      display: flex;
      flex-wrap: wrap;
      width: 240px;
      height: 240px;
      background-color: #ccc;

    }

    .item0 {
      width: 70px;
      /* 注意点 */
      min-height: 50px;
      background-color: pink;
      margin-right: 20px;
    }

    .items {
      /* 注意点 */
      flex: 1;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-content: space-between;
    }

    .item {
      width: 70px;
      height: 100px;
      background-color: pink;
    }
  </style>


<body>
  <div class="box">
    <div class="item0">0</div>
    <div class="items">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
    </div>

  </div>
</body>

案例2效果图：

代码块:

<style>
    /* 需求
    1.父盒子不给宽高由子盒子撑开
    */
    .box {
      display: flex;
      border-radius: 8px;
      /* 由于父盒子没给宽度，是由子盒子撑开了把圆角覆盖了，设置超出溢出隐藏即可 */
      overflow: hidden;

    }

    .item {
      flex: 1;
      height: 88px;
      background-color: pink;
    }

    /* -n+2 前面二个元素  n+2后面二个元素 */
    .box .item:nth-child(n+2) {
      border-left: 10px solid #ccc;
      /* margin-left: 10px; */
    }

    .son {
      display: flex;
      flex-direction: column;
    }

    .son span {
      flex: 1;
    }

    .son span:nth-child(1) {
      /* margin-bottom: 10px; */
      /* c3得盒子是包含了边框得，设置边框才会有背景颜色 */
      border-bottom: 10px solid #fff;
    }

    .war1 {
      /* 此时盒子得大小为100包含padding，border 内容大小为60 */
      box-sizing: border-box;
      width: 100px;
      height: 100px;
      padding: 10px;
      border: 10px solid #ccc;
      margin-top: 10px;
      color: #fff;
      background-color: rebeccapurple;
    }

    .war2 {
      /* 此时盒子得大小为140 不包含padding，border 内容大小为100 */
      box-sizing: content-box;
      width: 100px;
      height: 100px;
      padding: 10px;
      border: 10px solid #ccc;
      margin-top: 10px;
      color: #fff;
      background-color: royalblue;
      text-shadow: 10px 10px 10px red;
    }
  </style>

<body>
  <div class="box">
    <div class="item">1</div>
    <div class="item son">
      <span>a</span><span>b</span>
    </div>
    <div class="item son">
      <span>a</span><span>b</span>
    </div>
  </div>
  <div class="war1">border-box</div>
  <div class="war2">content-box</div>

</body>

3.子项属性案例

3.1 flex:1 分配剩余空间（圣杯布局）

效果图：

代码块：

div {
      display: flex;
      /* 这里不能写死，需写成占视口的百分之多少 */
      /* width: 800px; */
      width: 60%;
      height: 400px;
      background-color: pink;
    }

    div span:nth-child(1),
    div span:nth-child(3) {
      width: 150px;
      height: 100px;
      background-color: aqua;
    }

    div span:nth-child(2) {
      /* flex:1 高度默认是父级的100%  */
      flex: 1;
      background-color: yellow
    }
<div>
    <span>左侧固定宽高</span>
    <span>自适应</span></span>
    <span>右侧固定宽高</span>
  </div>

3.2 align-self:start 控制子项在侧轴方向的排列方式

效果图：

代码块：

.box {
      display: flex;
      /* 才能平分分布*/
      justify-content: space-around;
      width: 300px;
      height: 300px;
      border-radius: 5%;
      background-color: #999999;
      
    }

    span {
      width: 50px;
      height: 50px;
      border-radius: 50px;
      background-color: red;
      /* 文本垂直居中 */
      display: flex;
      justify-content: center;
      align-items: center;
    }


    span:nth-child(2) {
      align-self: center;
    }

    span:nth-child(3) {
      align-self: end;
    }

<div class="box">
    <span>点数1</span>
    <span>点数2</span>
    <span>点数3</span>
  </div>

3.order默认是0 ，数值越小越靠前

4.综合案例

1.flex的盒子让文字垂直居中

效果图：

代码块：

.box {
      display: flex;
      /* 这里不能写死，需写成占视口的百分之多少 */
      /* width: 800px; */
      width: 60%;
      height: 400px;
      background-color: pink;

    }

    .jiu {
      flex: 1;
      background-color: aqua;
      display: flex;
      /* flex 在自身，主轴侧轴均水平居中 */
      justify-content: center;
      align-items: center;
    }


<!-- 注意这里的结构 -->
  <div class="box">
    <div class="jiu">酒店选择</div>
  </div>

2.flex:1 的加强版及文字水平垂直居中

效果图：

代码块：

.box {
      display: flex;
      /* 这里不能写死，需写成占视口的百分之多少 */
      /* width: 800px; */
      width: 60%;
      height: 400px;
      background-color: pink;

    }

    .jiu {
      flex: 1;
      background-color: aqua;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .des {
      flex: 1;
      background-color: rosybrown;
      display: flex;
      flex-direction: column;
    }

    .des span:nth-child(1) {
      flex: 1;
      background-color: yellowgreen;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .des span:nth-child(2) {
      flex: 1;
      background-color: blueviolet;
      display: flex;
      justify-content: center;
      align-items: center;
    }


<div class="box">
    <div class="jiu">
      酒店选择
    </div>
    <div class="des">
      <span>酒店名1</span>
      <span>酒店名2</span>
    </div>
  </div>

流氓也是种气质 _Cookie

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
flex 原理及使用

flex-wrap: wrap 换行<div class="test"> <div> <button v-for="item in 10">{{item}}内容</button> </div></div>.test div { width: 500px; background-color: white; display: flex; .
复制链接

扫一扫