flex布局学习

最新推荐文章于 2024-02-17 18:34:22 发布

I like study.

最新推荐文章于 2024-02-17 18:34:22 发布

阅读量471

点赞数

分类专栏： Web前端文章标签： css

本文链接：https://blog.csdn.net/rj2017211811/article/details/104086401

版权

Web前端专栏收录该内容

19 篇文章 0 订阅

订阅专栏

一、flex布局

Flex是Flexible Box的缩写，顾名思义为“弹性布局”，用来为盒装模型提供最大的灵活性。
任何一个容器都可以指定为Flex 布局。
下面是一段html代码

<div class="root">
    <div>0</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
  </div>

为.root指定display:flex，则.root就成为了flex容器，里面的div为flex容器的元素
css代码

//flex布局容器
.root
  display flex
  //flex容器的子元素
  div
    width 50px
    height 50px
    border 1px solid black

二、flex布局方向

默认水平方向为x轴，左边为x轴的起点，右边为x轴的终点，垂直方向为y轴，上面为y轴的起点，下面为y轴的终点

三、flex容器的六大属性

(一)flex-direction
作用:为容器内的元素排列指定方向，row为左到右，row-reverse为右到左，column为上到下，column-reverse为上到下，即row和row-reverse控制x轴方向，column和column-reverse控制y轴方向
flex-direction:row（默认）
在这里插入图片描述
flex-direction:row-reverse

flex-direction:column

flex-direction:column-reverse

（二)flex-wrap
作用:父容器间距不够时候控制是否换行，wrap为换行，nowrap为不换行
当flex-direction设置为row-reverse时候
设置flex-wrap:nowrap(默认)，使用控制台缩小页面的宽度，发现父容器被压缩了，每个div宽度小于50px
在这里插入图片描述
当flex-direction设置为row-reverse时候
flex-wrap:wrap使用控制台缩小页面的宽度，发现父容器中div进行了换行，每个div宽度仍为50px

** (三)flex-flow**
作用:是flex-direction和flex-wrap的结合，
flex-flow: row wrap相当于分别设置flex-direction:row flex-wrap:wrap
在这里插入图片描述
（四)justify-content
根据flex-direction指定的方向进行起点、终点、居中的对齐
比如flex-flow为row wrap，row控制元素的左右方向排列
设置justify-content为 flex-start(默认)，
可以发现，容器的元素向左对齐了

设置justify-content为 flex-center，
可以发现，容器的元素居中对齐了
在这里插入图片描述
设置justify-content为 flex-end，
可以发现，容器的元素向右对齐了
（五)align-items
作用方向为交叉轴
若当前flex-direction为column
设置align-items为flex-start，则该元素左对齐，因为当前元素的排列为上下排列，而align-items作用在交叉轴，即x轴，flex-start就向左对齐

在这里插入图片描述
设置align-items为center，则该元素左右居中，因为当前元素的排列为上下排列，而align-items作用在交叉轴，即x轴，center就左右居中对齐

设置align-items为flex-start，则该元素右对齐，因为当前元素的排列为上下排列，而align-items作用在交叉轴，即x轴，flex-end就向右对齐
在这里插入图片描述
（六)align-content
align-content和align-items都是作用于交叉轴，不同于align-items的是align-content是作用于多行的，即在单行的条件下，align-content不生效，比如
flex-flow为row-reverse nowrap下，设置align-content为center，不会居中，因为此时是单行
在这里插入图片描述
而flex-flow为row-reverse wrap下，设置align-content为center，会居中，因为此时为多行

四、flex子容器的属性

(一)order
作用：order从小到大为元素显示的顺序，
例子：
有一个flex容器，里面的div为按照row排列的，有三个div，分别有三个class，child1，child2，child3，设置2的order为0，3的order为1，1的order为2

<template>
  <div class="root">

    <div class="child1">1</div>
    <div class="child2">2</div>
    <div class="child3">3</div>
  </div>

</template>

<script>
export default {
  name: 'testFlex'
}
</script>

<style scoped lang="stylus">
//flex布局容器
.root
  display flex
  flex-direction row
  flex-wrap wrap
  /*justify-content center*/
  /*align-items flex-end*/
  /*background-color cadetblue*/

  height 500px
  div
    width 50px
    height 20px
    border 1px solid black
    &.child1
      order 2
    &.child2
      order 0
    &.child3
      order 1
</style>

在这里插入图片描述
(二)flex-grow
作用：对剩余空间进行分配，如果没有剩余空间就不分配
flex-grow默认为0，即不分配
比如设置.child1的flex-grow设置为1，即剩余空间.child1占一份

在设置.child2的flex-grow设置为2，即剩余空间.child1占一份，.child2占两份
在这里插入图片描述
(三)flex-shrink
作用：缩小比例，如果空间不足，该项将缩小
(四)flex-basic
作用：分配多余空间前占据的空间，优先级比width/height高，
比如当前flex-direction为row，设置.child1的flex-basic为25px,.child2的flex-basic为24px，则flex-basic生效，flex-basic默认为auto
在这里插入图片描述
(五)flex
flex为flex-grow flex-shrink flex-basic三个的综合
(六）align-self
作用：对父容器的align-items进行覆盖，比如
父容器flex-direction为row align-items为flex-end,则子元素方向为从下到上排列
此时设置一个子元素1的align-self为flex-start,如图
在这里插入图片描述