AI 助理
文档备案控制台
开发者社区 开发与运维 文章 正文

Flex 弹性布局

2016-11-02 1077
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 多行自适应，多列自适应，间隔也能自适应，任意对齐  创建弹性容器  flex containerdisplay: block | inline  | inline-block  | none | flex  弹性元素  flex item是不是flex container 弹性容器中所有的子元素都是  弹性元素呢？不是的，只有弹性容器，在文档流中的直接子元素(不包含孙子元素 )才是弹性元素。

多行自适应，多列自适应，间隔也能自适应，任意对齐

image

 

 

创建弹性容器  flex container

display: block | inline  | inline-block  | none | flex

 

 

弹性元素  flex item

是不是flex container 弹性容器中所有的子元素都是  弹性元素呢？

不是的，只有弹性容器，在文档流中的直接子元素(不包含孙子元素 )才是弹性元素。

 

 

flex 布局特性

排列和方向

flex排列和方向的属性 描述
flex-direction 弹性的方向
flex-wrap 弹性的换行
flex-flow 弹性的流
order 弹性的顺序

 

 

flex-direction

flex-direction取值 描述
row 行
row-reverse 从右向左
column 从上到下
column-reverse 从下到上

 

row (flex-direction默认值)

image

 

 

row-reverse

image

 

column

image

 

column-reverse

image

 

举个栗子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>flex direction</title>
    <style type="text/css">
    .container{margin: 20px;line-height: 40px;font-size: 20px;color: #fff;background-color: #963297;}
    .item{margin: 10px;line-height: 40px;text-align: center;background-color: #c99702;}
    .container0 .item, .container1 .item{padding: 0 12px;}


    .container{display:flex;}
    .container1{flex-direction: row-reverse;}
    .container2{flex-direction: column;}
    .container3{flex-direction: column-reverse;}
    </style>
</head>
<body>
<div class="container container0">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
</div>
<div class="container container1">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
</div>
<div class="container container2">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
</div>
<div class="container container3">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
</div>
</body>
</html>

image

 

 

flex-wrap

flex-wrap取值 描述
nowrap 不换行（默认值）
wrap 换行
wrap-reverse  

 

wrap

image

 

举个栗子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>flex-direction</title>
    <style type="text/css">
    .container{width: 400px;margin: 20px;line-height: 40px;font-size: 20px;color: #fff;background-color: #963297;}
    .item{margin: 10px;width: 100px;line-height: 40px;text-align: center;background-color: #c99702;}

    .container{display: flex;}
    .container1{flex-wrap: wrap;}
    .container2{flex-wrap: wrap-reverse;}
    </style>
</head>
<body>

<div class="container container0">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
</div>

<div class="container container1">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
</div>

<div class="container container2">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
</div>

</body>
</html>

image

 

flex-flow(推荐使用)

语法:

flex-flow：<' flex-direction '> || <' flex-wrap '>

默认值：看各分拆属性
适用于：flex容器
继承性：无
动画性：否
计算值：指定值

 

取值：

<' flex-direction '>：定义弹性盒子元素的排列方向。
<' flex-wrap '>：控制flex容器是单行或者多行。

 

说明:

复合属性。设置或检索弹性盒模型对象的子元素排列方式。

 

推荐使用 flex-flow ,而不是单独用flex-direction  或 flew-wrap

image初始值   row   nowrap

 

 

imageimage

 

 

order

order 是一个『相对值』 ，是排在主轴上的顺序

order 值越大，排名越靠后。

order取值 描述
order 整数
initial 初始值  0

image

 

举个栗子:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>order</title>
    <style type="text/css">
    .container{
        display: flex;
        background-color: #963297;
        width: 300px;
        padding:3px;
    }

    .item{
        color: #fff;
        width: 50px;
        line-height: 30px;
        background-color: #d29201;
        margin: 4px;
        text-align: center;
    }
    .item1{order: 10;}
    .item2{order: 2;}
    .item3{order: 3;}

    </style>
</head>
<body>
<div class="container">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
</div>
</body>
</html>

image

 

 

弹性

flex弹性相关的属性

  • flex-grow
  • flex-shrink
  • flex-basis

 

flex-basis

设置『flex item』的 『初始宽度、 高度』

横向排列时，设置的是宽

纵向排列时，设置的是高

 

语法：

flex-basis：<length> | <percentage> | auto | content

默认值：auto

适用于：flex子项

继承性：无

动画性：是，当值为非关键字时

计算值：指定值

 

取值：

<length>： 用长度值来定义宽度。不允许负值<percentage>：用百分比来定义宽度。不允许负值auto： 无特定宽度值，取决于其它属性值content： 基于内容自动计算宽度

说明：

设置或检索弹性盒伸缩基准值。

  • 如果所有子元素的基准值之和大于剩余空间，则会根据每项设置的基准值，按比率伸缩剩余空间
  • 对应的脚本特性为flexBasis。

 

flex-grow

设置元素所能分配到的空余空间的比例。

语法:

flex-grow：<number>

默认值：0

适用于：flex子项

继承性：无

动画性：是

计算值：指定值

 

取值：

<number>：用数值来定义扩展比率。不允许负值

 

说明：

  • 根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间。

flex-basis + flow-grow / sum(flow-grow) * remain

 

flex-shrink

把负的剩余空间平摊

语法:

flex-shrink：<number>
默认值：1
适用于：flex子项
继承性：无
动画性：是
计算值：指定值

 

取值:

<number>：用数值来定义收缩比率。不允许负值

 

说明:

设置或检索弹性盒的收缩比率。
根据弹性盒子元素所设置的收缩因子作为比率来收缩空间。

flex-basis + flow-shrink / sum(flow-shrink) * remain

 

flex(推荐使用)

语法

flex：none | <' flex-grow '> <' flex-shrink >'? || <' flex-basis '>
默认值：看各分拆属性
适用于：flex子项
继承性：无
动画性：否
计算值：看各分拆属性

 

取值

none：none关键字的计算值为: 0 0 auto
<' flex-grow '>：用来指定扩展比率，即剩余空间是正值时此「flex子项」相对于「flex容器」里其他「flex子项」能分配到空间比例。
在「flex」属性中该值如果被省略则默认为「1」
<' flex-shrink '>：用来指定收缩比率，即剩余空间是负值时此「flex子项」相对于「flex容器」里其他「flex子项」能收缩的空间比例。
在收缩的时候收缩比率会以伸缩基准值加权
在「flex」属性中该值如果被省略则默认为「1」
<' flex-basis '>：用来指定伸缩基准值，即在根据伸缩比率计算出剩余空间的分布之前，「flex子项」长度的起始数值。
在「flex」属性中该值如果被省略则默认为「0%」
在「flex」属性中该值如果被指定为「auto」，则伸缩基准值的计算值是自身的 <' width '> 设置，如果自身的宽度没有定义，则长度取决于内容。

说明

复合属性。设置或检索弹性盒模型对象的子元素如何分配空间。
如果缩写「flex: 1」, 则其计算值为「1 1 0%」
如果缩写「flex: auto」, 则其计算值为「1 1 auto」
如果「flex: none」, 则其计算值为「0 0 auto」
如果「flex: 0 auto」或者「flex: initial」, 则其计算值为「0 1 auto」，即「flex」初始值

举个栗子:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>flex</title>
    <style type="text/css">
    .container{
        background-color: #963297;
    }

    .item{margin: 10px;line-height: 40px;text-align: center;color: #fff;font-size: 20px;background-color: #c99702;font-size: 50px;}
    .container{display: flex;flex-flow: column;}/* 弹性布局，且纵向排列 */
    html,body,.container{height: 100%;}
    .item{flex: 1 1 0;}/* flex-grow:1;  flex-shrink:1; flex-basis:0; */
    .item3{flex: 2;}/* flex-grow:2; */
    </style>
</head>
<body>
<div class="container">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
</div>
</body>
</html>

image

 

 

对齐

和『对齐』相关的属性有:

 

  • justify-content
  • align-items
  • align-self
  • align-content

 

 

 

justify-content

justify-content: flex-start | flex-end | center | space-between | space-around

默认值：flex-start

设置 main-axis 方向上对齐方式

justify-content 和 text-align是类似的，比text-align 更丰富一些。

 

举个栗子:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>justify-content</title>
    <style type="text/css">
    .container{margin: 20px;line-height: 40px;font-size: 20px;color: #fff;background-color: #963297;}

    .item{margin: 10px;width: 100px;line-height: 40px;text-align: center;background-color: #c99702;}

    .container{display: flex; }
    .fs{justify-content: flex-start;}
    .fe{justify-content: flex-end;}
    .c{justify-content: center;}
    .sb{justify-content: space-between;}
    .sa{justify-content: space-around;}


    /*.container{flex-flow: column; width: 120px;height: 300px;}*/
    </style>
</head>
<body>

<div class="container fs">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
</div>

<div class="container fe">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
</div>

<div class="container c">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
</div>

<div class="container sb">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
</div>

<div class="container sa">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
</div>

<div class="container fs">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
</div>

</body>
</html>

image

 

 

 

 

align-items

设置『辅轴方向上』的对齐方式

语法:

align-items：flex-start | flex-end | center | baseline | stretch
默认值：stretch
适用于：flex容器
继承性：无
动画性：是
计算值：指定值

 

取值:

flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。
stretch：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。

 

说明:

定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。
对应的脚本特性为alignItems。

 

 

举个栗子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>align-items</title>
    <style type="text/css">
    .container{margin: 20px;line-height: 40px;font-size: 20px;color: #fff;background-color: #963297;}
    .item{margin: 10px;width: 100px;line-height: 40px;text-align: center;background-color: #c99702;}


    .container{display: flex;}
    .item1{line-height: 100px;}
    .item2{line-height: 70px;}
    .fs{align-items: flex-start;}
    .fe{align-items: flex-end;}
    .c{align-items: center;}
    .s{align-items: stretch;}
    .b{align-items: baseline;}

    </style>
</head>
<body>
    <div class="container fs">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
    </div>
    <div class="container fe">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
    </div>
    <div class="container c">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
    </div>
    <div class="container s">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
    </div>
    <div class="container b">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
    </div>
    
</body>
</html>

image

 

我看不懂，最后的 baseline。 觉得应该和 flex-start相同。而实际和center相同。 求解释

 

 

 

align-self

align-self：auto | flex-start | flex-end | center | baseline | stretch

设置『单个 flex item 』在cross-axis 方向上的对齐方式

 

举个栗子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>align-self</title>
    <style type="text/css">
    .container{margin: 20px;line-height: 40px;font-size: 20px;color: #fff;background-color: #963297;}
    .item{margin: 10px;width: 100px;line-height: 40px;text-align: center;background-color: #c99702;}
    

    .container{display: flex;align-items: flex-start;}
    .item1{line-height: 100px;}
    /*.item2{align-self: flex-end;}*/
    /*.item2{align-self: center;}*/
    /*.item2{align-self: baseline;}*/
    /*.item2{align-self: stretch;}*/
    </style>
</head>
<body>
        <div class="container">
            <div class="item item1">1</div>
            <div class="item item2">2</div>
            <div class="item item3">3</div>
        </div>
</body>
</html>

image

 

 

 

flex-start

imageflex-end

imagecenter

imagebaseline

imagestretch

 

 

 

align-content

align-content：flex-start | flex-end | center | space-between | space-around | stretch

设置 cross-axis 辅轴方向上行对齐方式

flex换行了，多行之间的对齐方式

默认值： stretch 拉伸

 

举个栗子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>align-content</title>
    <style type="text/css">
    .container{margin: 20px;width: 800px;line-height: 40px;font-size: 20px;color: #fff;background-color: #963297;}
    .item{margin: 10px;width: 200px;line-height: 40px;text-align: center;background-color: #c99702;}

    .container{display: flex;}
    .container{height: 800px;flex-flow: row wrap; align-items: flex-start;}

    /*.container{align-content: flex-start;}*/
    /*.container{align-content: flex-end;}*/
    /*.container{align-content: center;}*/
    /*.container{align-content: space-between;}*/
    /*.container{align-content: stretch;}*/

    </style>
</head>
<body>
<div class="container">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
        <div class="item item4">4</div>
        <div class="item item5">5</div>
        <div class="item item6">6</div>
        <div class="item item7">7</div>
        <div class="item item8">8</div>
        <div class="item item9">9</div>
        <div class="item item10">10</div>
</div>
</body>
</html>

image

 

 

 

布局--三行两列自适应布局

核心代码

<div class="head">head</div>
<div class="body">
        <div class="side">side</div>
        <div class="main">main</div>
</div>
<div class="foot">foot</div>

 

body{display: flex;flex-flow: column;}
.head,.foot{height: 100px;}
.body{flex-flow: 1; display: flex;}
.side{width: 200px;}
.main{flex: 1;}

 

举个栗子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>三行两列自适应布局</title>
    <style type="text/css">
    html,body{margin: 0;text-align: center;}
    .head, .foot{line-height: 100px;background-color: #000;color: #fff;}
    .side{background-color: yellow;}
    .main{background-color: pink;}


    html,body{height: 100%;}
    body{display: flex;flex-flow: column;}
    .head,.foot{height: 100px;}
    .body{flex: 1;display: flex;}
    .side{width: 200px;}
    .main{flex: 1;}

    .main{margin-left: 10px;}
    /*.body{width: 960px;align-self: center;}*/
    </style>
</head>
<body>
<div class="head">head</div>
<div class="body">    
        <div class="side">side</div>
        <div class="main">main</div>
</div>
<div class="foot">foot</div>
</body>
</html>

 

image

 

 

 

一个别人写的开源项目  flex-layout-attribute 

 

开始做，坚持做，重复做
文章标签：
容器
Web App开发
前端开发
关键词：
flex布局
effort880829
目录
相关文章
凉凉心.
|
6月前
|
前端开发 算法 Java
（CSS）使用Flex布局，帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置！
（CSS）使用Flex布局，帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置！
凉凉心.
214 1
凉凉心.
|
6月前
|
前端开发 算法 Java
【CSS】前端三大件之一，如何学好？从基本用法开始吧！（六）：全方面分析css的Flex布局，从纵、横两个坐标开始进行居中、两端等元素分布模式；刨析元素间隔、排序模式等
Flex 布局 布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。 一、Flex 布局是什么？ Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
凉凉心.
438 0
全栈若城
|
10月前
|
设计模式 容器
13.HarmonyOS流式卡片列表实现指南：Flex多行布局详解
在现代移动应用开发中，流式卡片列表是一种常见且实用的UI设计模式。它能够自适应屏幕宽度，在有限空间内高效展示多个内容项。本教程将详细讲解如何使用HarmonyOS的ArkUI框架中的Flex组件实现一个灵活的流式卡片列表，重点关注多行布局与对齐策略的应用。
全栈若城
337 2
全栈若城
|
10月前
|
开发者 UED 容器
07.精通HarmonyOS Flex对齐：从基础到高级布局技巧(上)
在HarmonyOS Next的ArkUI框架中，Flex容器提供了强大而灵活的对齐系统，使开发者能够精确控制子元素在容器中的排列方式。掌握这些对齐技术，是构建专业级用户界面的关键。
全栈若城
302 0
全栈若城
|
10月前
|
UED 容器
5.HarmonyOS Next开发宝典：掌握Flex布局的艺术
Flex布局（弹性布局）是HarmonyOS Next中最强大的布局方式之一，它提供了一种更加高效、灵活的方式来对容器中的子元素进行排列、对齐和分配空间。无论是简单的居中显示，还是复杂的自适应界面，Flex布局都能轻松应对。
全栈若城
296 0
程序员一鸣
|
开发者 容器
鸿蒙开发：弹性布局Flex
在实际的开发中，需要掌握主轴与交叉轴的关系、换行规则及子元素属性，同时注意性能与兼容性问题，还有一点，Flex组件在渲染时存在二次布局过程，因此在对性能有严格要求的场景下建议使用Column、Row代替。
程序员一鸣
337 10
鸿蒙开发：弹性布局Flex
全栈若城
|
10月前
|
UED 容器
10.HarmonyOS Next布局进阶：嵌套Flex容器与空间分配策略
在HarmonyOS Next的ArkUI框架中，Flex布局是构建用户界面的核心技术之一。通过嵌套使用Flex容器，我们可以创建复杂而灵活的界面结构，满足各种应用场景的需求。本教程将深入探讨如何在HarmonyOS Next中使用嵌套Flex容器实现复杂布局，以及如何合理分配和控制空间。
全栈若城
304 0
那年春天
|
前端开发 容器
flex布局
【10月更文挑战第7天】
那年春天
364 87
那年春天
|
前端开发 UED 容器
使用 Flex 布局实现垂直居中效果
【10月更文挑战第7天】
那年春天
1619 57
我是快乐的嘟嘟
|
前端开发 UED 容器
在 CSS 中使用 Flex 布局实现页面自适应时需要注意什么？
【10月更文挑战第22天】在使用 Flex 布局实现页面自适应时，需要对其基本原理和特性有深入的理解，同时结合具体的布局需求和场景，进行细致的调整和优化。通过合理的设置和注意事项的把握，才能实现理想的自适应效果，提升用户体验。还可以根据实际情况进行更深入的探索和实践，以不断提升 Flex 布局的应用能力。
我是快乐的嘟嘟
677 34

热门文章

最新文章

  • 1
    Flash/Flex学习笔记(22)：滤镜学习
  • 2
    Flash/Flex学习笔记(36)：自己动手实现一个滑块控件(JimmySilder)
  • 3
    flex发布的release程序要配release的Flash Player，速度飞快！如果有一方是debug版本的，速度就降下来了，要注意！
  • 4
    Flex多国语言示例
  • 5
    Flash/Flex学习笔记(41)：碰撞检测
  • 6
    Flash/Flex学习笔记(31)：对象拖拽与投掷
  • 7
    Flash/Flex学习笔记(33)：如何用As3协同Flash CS IDE控制MovieClip实例
  • 8
    flex3导入php编辑功能的两种方式
  • 9
    全面了解 Flex 布局的基本概念、常用属性和使用方法
  • 10
    Flash/Flex学习笔记(38)：缓动动画
  • 1
    （CSS）使用Flex布局，帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置！
    214
  • 2
    【CSS】前端三大件之一，如何学好？从基本用法开始吧！（六）：全方面分析css的Flex布局，从纵、横两个坐标开始进行居中、两端等元素分布模式；刨析元素间隔、排序模式等
    438
  • 3
    13.HarmonyOS流式卡片列表实现指南：Flex多行布局详解
    338
  • 4
    10.HarmonyOS Next布局进阶：嵌套Flex容器与空间分配策略
    305
  • 5
    08.HarmonyOS Next响应式布局秘籍：掌握Flex换行与对齐技术
    302
  • 6
    07.精通HarmonyOS Flex对齐：从基础到高级布局技巧(上)
    302
  • 7
    5.HarmonyOS Next开发宝典：掌握Flex布局的艺术
    296
  • 8
    开源8B参数全能扩散模型Flex.2-preview：把线稿变商稿，还能边画边改！
    684
  • 9
    鸿蒙开发：弹性布局Flex
    337
  • 10
    Bootstrap5 Flex（弹性）布局6
    369

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    开通oss服务