flexbox - 弹性盒子布局(弹性布局)

采用flex布局的元素,称为 Flex 容器(flex container),简称"容器"

 

 flex-direction

用于设置主轴方向;子元素默认是按照主轴线排列的,所以 flex-direction 也指定了弹性子元素在弹性容器中的排列方式

  • row(默认):主轴为水平方向,起点在左端
  • row-reverse:主轴为水平方向,起点在右端
  • column:主轴为垂直方向,起点在上沿
  • column-reverse:主轴为垂直方向,起点在下沿

主轴 &交叉轴:交叉轴垂直于主轴

flex-wrap 

用于设置自动换行;如果flexbox 容器 (container) 的宽度不足以存放 所有 flex元素 , 就会出现滚动条,确保所有的 flex元素 都在一行;若想实现超出container的宽度就自动换行,可设置flex-wrap: wrap

  • nowrap(默认):不换行
  • wrap:换行,换到下面
  • wrap:换行,换到上面

flex-flow

flex-direction和flex-wrap的简写形式,默认为row nowrap

flex-basis

正常情况下,一个flex元素的宽度是由其内容决定的;如果容器还有剩余空间,那么这个flex元素可以分得最多到 flex-basis 指定的宽度

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .wrapper {
            /* 内部显示规则为flexbox布局;外部显示规则时block (div class="wrapper") */
            display: flex; 
            /* 指定flex元素的间距 */
            gap: .5em; 
            /* 设置水平为主轴,左侧为起点,换行 */
            flex-flow: row wrap;
        }
        .wrapper > div {
            /* 边框  属性值:边框线粗细像素 线条种类 线条颜色 */
            border:1px solid black;
        }
    </style>
</head>
<body>
        <div class="wrapper">  
        <div>1</div>
        <div>2</div>
        <div> 3
          <br>3
          <br>3
          <br>3
        </div>
        <div>444</div>
        <div style="flex-basis: 300px">5</div>
        <div style="flex-basis: 200px">6</div>
        <div style="flex-basis: 100px">777777777777777</div>
        <div>8888888888888</div>
      </div>
</body>
</html>

 

flex-grow

如果有剩余空间,这个元素可以分配到多少的比例

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .wrapper {
            display: flex;
            gap: .5em; 
            flex-flow: row wrap;
            border:1px solid red;
        }
        .wrapper > div {
            border:1px solid black;
        }
    </style>
</head>
<body>
    <div class="wrapper">  
        <div>1</div>
        <div>2</div>
        <div> 3
          <br>3
          <br>3
          <br>3
        </div>
        <div style="flex-grow: 3">5</div>
        <div style="flex-grow: 2">6</div>
        <div style="flex-grow: 1">7</div>
        <div>8888888888888</div>  
      </div>
</body>
</html>

 

flex-shrink 

如果 flex容器空间比所有 flex元素空间总和小,这个元素空间缩减的比例

主轴对齐——justify-content 

  • flex-start:flex元素和容器主轴方向开始位置对齐(左对齐;flex-direction默认值为row)
  • flex-end:flex元素和容器主轴方向结束位置对齐(右对齐)
  • center:flex元素和容器主轴方向中间位置对齐
  • space-between:flex元素 均匀分布在主轴上,间距相同;第一个 flex元素 和 container的主轴方向开始位置平齐,最后一个 flex元素 和 container的主轴方向结束位置平齐
  • space-around:flex元素 均匀分布在主轴上,间距相同;第一个 flex元素 和 container的主轴方向开始位置的间距 以及 最后一个 flex元素 和 container的主轴方向结束位置的间距都是flex元素间距的一半
  • space-evenly:flex元素 均匀分布在主轴上,间距相同;第一个 flex元素 和 container 的主轴方向开始位置的间距 以及 最后一个 flex元素 和 container的主轴方向结束位置的间距都于flex元素间距相同

从轴对齐——align-items

该属性缺省的条件下,所有的 flex元素和最高的flex元素保持一致

  • flex-start:flex元素和容器从轴方向的开始位置对齐(上边对齐)
  • flex-end:flex元素和容器从轴方向的结束位置对齐(下边对齐)
  • center:flex元素和容器从轴方向的中间位置对齐

grid - 网格布局

本文参考自:

22 flex布局容器六大属性_flex容器属性-CSDN博客

界面布局 - Flexbox | 白月黑羽

界面布局 - Flexbox | 白月黑羽

点赞(0) 打赏

评论列表 共有 0 条评论

暂无评论

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部