弹性盒模型（flexbox）布局初体验 - CSS

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

首页 > 博客列表 > 弹性盒模型（flexbox）布局初体验

博主信息

博文 13

粉丝 2

访问量 13809

专题推荐

更多>

1.内容的多列多栏显示

    <style>
        /* 初始化 */
    *{
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
    :root{
        font-size: 20px;
        color:blue;
    }
    div{
        border: 1px solid black;
        padding: 20px;
        width: 50rem px;
        margin: 30px auto;
    }
    /* 分列显示 */
    div{
        column-count: 3;
        column-width: auto;
        column-rule-style: solid;
        column-rule-width: thin;
        column-rule-color: black;
    }
    </style>
</head>
<body>
    <div>
        由军事科学院军事医学研究院与地方企业共同研发形成的新型冠状病毒mRNA疫苗（ARCoV），19日正式通过国家药品监督管理局临床试验批准。这是国内首个获批开展临床试验的新冠mRNA疫苗。
新冠肺炎疫情暴发以来，军事科学院军事医学研究院紧前部署应急科研攻关，同时推进多条技术路线的新冠疫苗研发。国产新冠mRNA疫苗是该院继重组新冠疫苗（腺病毒载体）后，获批临床试验的又一高技术疫苗品种。
据项目负责人、该院研究员秦成峰介绍，mRNA疫苗是近年来新兴的一种疫苗形式，其基本原理是通过特定的递送系统将表达抗原靶标的mRNA导入体内，在体内表达出蛋白并刺激机体产生特异性免疫学反应，从而使机体获得免疫保护。
(来源:新华社)
    </div>
</body>

例图：

2.弹性盒模型（flexible box/flexboxflexible box/flexbox）

用于实现容器项目里的对齐、方向、排序，即使在项目大小的位置、动态生成的情况最大特性在于能够动态修改子元素的宽度和高度，以满足在不同尺寸下屏幕的恰当布局。

采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
4.容器属性及应用
flex-direction 设置主轴方向，确定弹性子元素排列方式

属性值	含义
row (默认值)	主轴为水平方向。排列顺序与页面的文档顺序相同。如果文档顺序是ltr,则排列顺序是从左到右;如果文档顺序是rtl,则排列顺序是从右到左。
row-reverse	主轴为水平方向。排列顺序与页面的文档顺序相反。
Column	主轴为垂直方向。排列顺序为从上到下。
column-reverse	主轴为垂直方向。排列顺序为从下到上。

         .container{flex-direction: row;

 .container{flex-direction: row-reverse;}

.container{flex-direction: column;}

.container{flex-direction: column-reverse;}

flex-wrap 当弹性子元素超出弹性容器范围时是否换行

属性值	含义
nowrap (默认值	溢出时不换行
Wrap	溢出时自动换行
wrap-reverse	溢出时自动换行，翻转排列。

.container{flex-wrap: wrap;}

.container{flex-wrap: wrap-reverse;}

flex flow flex- direction和flex- wrap属性的快捷方式，复合属性
```
.container{flex-flow: row;}
```
justify-content 主轴上的对齐方式,项目之间

属性值	含义
flex-start (默认值)	主轴开始对齐，主轴为横轴，ltr环境下，左对齐
flex-end	主轴结束对齐，主轴为横轴，ltr环境下，右对齐
Center	居中对齐
space-between	第一个、最后一个对齐弹性容器的边缘，其余均匀分布。
space-around	全部均匀分布

justify-content: flex-start;

justify-content: flex-end;

justify-content: center;

justify-content:space-between;

justify-content:space-around;

justify-content:space-evenly;

align-items 侧轴_上的对齐方式

属性值	含义
flex-start	侧轴开始对齐，主轴为横轴，顶对齐
flex-end	侧轴结束对齐
Center	居中对齐
Baseline	基线对齐
stretch (默认值)	从侧轴开始到侧轴结束铺满整个侧轴

 align-items: stretch;

 align-items: flex-start;

 align-items: flex-end;

 align-items: center;

align-content 侧轴上有空白时，侧轴的对齐方式


flex-start	主轴开始对齐，主轴为横轴，ltr环境下，左对齐
flex-end	主轴结束对齐，主轴为横轴，ltr环境下，右对齐
Center	居中对齐
space-between	第一个、最后一个对齐弹性容器的边缘，其余均匀分布。
space- around	全部均匀分布
stretch (默认值)	各行伸展以占用剩余空间。如果剩余空间是负数，该值等效于flex-start

align-content: flex-start;

 align-content: flex-end;

align-content: center;

align-content: space-between;

 align-content: space-around;

align-content: space-evenly;

3.弹性子元素属性

Order <integer> 控制弹性容器里子元素的顺序,数值小的排在前面，可以为负值。

   <style>
      .container {display: flex;}
      .container > .item:first-of-type {order: 3;}
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
    </div>
  </body>

5.flex布局导航栏

    <style>
      /* 初始化 */
      * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
      }
      a {
        text-decoration: none;
        color: silver;
      }
      nav {
        height: 50px;
        background-color: midnightblue;
        padding: 0 60px;
        /* 转为弹性盒布局 */
        display: flex;
      }
      nav a {
        height: inherit;
        line-height: 50px;
        padding: 0 20px;
      }
      nav a:hover {
        background-color: coral;
        color: white;
      }
      /* 登录/注册放在最右边 */
      nav a:last-of-type {
        margin-left: auto;
      }
    </style>
  </head>
  <body>
    <header>
      <nav>
        <a href="">首页</a>
        <a href="">视频课程</a>
        <a href="">资料下载</a>
        <a href="">课程介绍</a>
        <a href="">论坛</a>
        <a href="">登录/注册</a>
      </nav>
    </header>
  </body>