CSS —— 界面布局

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 指定的宽度

html 复制代码
<!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

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

html 复制代码
<!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 | 白月黑羽

相关推荐
归于尽1 分钟前
浏览器和 Node.js 的 EventLoop,原来差别这么大
前端·node.js·浏览器
雲墨款哥2 分钟前
Vue 3 路由管理实战:从基础配置到性能优化
前端·vue.js
Jacob02346 分钟前
JavaScript 模块系统二十年:混乱、分裂与出路
前端·javascript
独立开阀者_FwtCoder11 分钟前
Vite Devtools 要发布了!期待
前端·面试·github
独立开阀者_FwtCoder11 分钟前
国外最流行的 UI 组件库!适配 Vue、React、Angular!
前端·vue.js·后端
CodeSheep18 分钟前
小米汽车这薪资是认真的吗?
前端·后端·程序员
白白李媛媛24 分钟前
上传Vue3+vite+Ts组件到npm官方库保姆级教程
前端·arcgis·npm
晴殇i32 分钟前
前端内容保护:如何有效防止用户复制页面内容?
前端·javascript·css
程序猿阿伟37 分钟前
《声音的变形记:Web Audio API的实时特效法则》
开发语言·前端·php
凌览40 分钟前
有了 25k Star 的MediaCrawler爬虫库加持,三分钟搞定某红书、某音等平台爬取!
前端·后端·python