正文 

当前位置： 首页 > java > java教程

flex布局

txwslyf txwslyf     2022-09-01     657

关键词：

参考资料： 

  1. 阮一峰：Flex 布局教程：语法篇

  2. 阮一峰：Flex 布局教程：实例篇

  3. A Complete Guide to Flexbox

 

一、基本概念

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。

主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

 

下面谈谈我自己对于flex布局的一点点小小的理解：

（1）实例一：

    <style>
        .parent {
            width: 500px;
            background-color: bisque;
            display: flex;
        }
    </style>

<div class="parent">
    <div class="child"><p>1</p></div>
    <div class="child"><p>2</p></div>
    <div class="child"><p>3</p></div>
</div>

将父元素设置为dispaly:flex，子元素的布局会和传统的float+position布局有很大的区别。

可以看到每个子元素会依次沿着水平方向按顺序排列，在垂直方向会完全扩展至父元素的宽度。

（2）实例二：

    <style>
        .parent {
            width: 500px;
            background-color: bisque;
            display: flex;
        }
        .child{
            width: 500px;
        }
        .child1{
            background-color: brown;
            width: 100px;
        }
        .child2{
            background-color: chartreuse;
        }
        .child3{
            background-color: aqua;
        }
    </style>

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

 

看上面这行代码，子元素1宽度是100px，子元素2和3的宽度都是500px，三个子元素的宽度加起来超过了父元素的宽度，但是因为flex布局默认是不会换行的，所以三个元素还是会占据一行，但是会按照比例缩小。

（3）实例三

之前写过一个使用<button/>标签来实现4*4网格布局的博客，利用的是传统的float+clear布局模式，实现较为繁琐，但是使用flex布局却可以轻松实现：

    <style>
        * {
            margin: 0;
            padding: 0;
            font-size: 100%;
        }

        .box {
            display: flex;
        }
        
        .item {
            width: 50px;
            height: 50px;
            border: 2px solid black;
            background-color: aqua;
            margin-right: -2px;
            margin-bottom: -2px;
            line-height: 50px;
            text-align: center;
        }
    </style>


<div class="box">
    <div class="row">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
    </div>
    <div class="row">
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
        <div class="item">8</div>
    </div>
    <div class="row">
        <div class="item">9</div>
        <div class="item">10</div>
        <div class="item">11</div>
        <div class="item">12</div>
    </div>
    <div class="row">
        <div class="item">13</div>
        <div class="item">14</div>
        <div class="item">15</div>
        <div class="item">16</div>
    </div>
</div>

 

效果如下：

可以看到，我们仅仅在父元素加上了display:flex之后，呈现的布局是就已经很完美了，要是使用传统的float+clear布局模式，代码会更加复杂。但是如果我们想要数字横向递增怎么办？

代码如下：

    <style>
        * {
            margin: 0;
            padding: 0;
            font-size: 100%;
        }

        .box {
            display: flex;
            flex-flow: wrap;   //使得flex item可以换行
        }

        .row{
            display: flex;     //每一行的布局也改为flex布局，这样item便会横向排成一行
            flex-basis: 100%;  //将row的flex-basis属性设置为100%，这样每一的row元素便会占据一行的空间
        }

        .item {
            width: 50px;
            height: 50px;
            border: 2px solid black;
            background-color: aqua;
            margin-right: -2px;
            margin-bottom: -2px;
            line-height: 50px;
            text-align: center;
        }
    </style>

 

 现在效果如下：

（4）实例四

这是在A Complete Guide to Flexbox的一个例子：

<style>
        .wrapper {
            display: flex;
            flex-flow: row wrap;
            font-weight: bold;
            text-align: center;
        }

        .header {
            flex: 100%;
            background-color: aquamarine;
            padding: 10px;
        }

        .main {
            background-color: bisque;
            text-align: left;
            padding: 10px;
        }

        .aside {
            flex: 100%;
            padding: 10px;
        }

        .aside-1 {
            background-color: brown;
        }

        .aside-2 {
            background-color: blueviolet;
        }

        .footer {
            flex: 100%;
            background-color: chartreuse;
            padding: 10px;
        }

        @media all and (min-width: 600px) {
            .aside {
                flex: 1;
            }
        }

        @media all and (min-width: 800px) {
            .aside-1 {
                order: 1;
            }

            .main {
                order: 3;
                flex: 2;
            }

            .aside-2 {
                order: 3;
            }

            .footer {
                order: 4;
            }

        }
    </style>
<div class="wrapper">
    <header class="header">Header</header>
    <article class="main">
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum
            tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas
            semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
    </article>
    <aside class="aside aside-1">Aside1</aside>
    <aside class="aside aside-2">Aside2</aside>
    <footer class="footer">Footer</footer>
</div>

 

这个例子实现了响应式的布局，当页面宽度小于600px时，是垂直布局：

当页面宽度在600px~800px之间：

当页面宽度大于800px时：

 

flex弹性布局

Css3的flex布局用法        Flex意为“弹性布局”，英文flexiblebox的缩写，flex布局使css盒模型变得更加强大和灵活，flex布局主要用在webapp和移动端中使用，移动端flex布局，将使的布局变得异常简单。&nbs... 查看详情

flex布局

Flex布局flex布局是FlexibleBox的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局，包括行内元素，例如：.box{display:inline-flex;}Webkit内核的浏览器，必须加上-webkit前缀。.box{display:-webkit-fl... 查看详情

flex布局

一、Flex布局是什么？Flex是FlexibleBox的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。块级元素display:flex行内元素display:inline-flex注意 1>.Webkit内核的浏览器，必须加上-webkit前缀... 查看详情

flex布局基础1

一、Flex布局是什么?Flex即："弹性布局"任何一个容器都可以指定为Flex布局　　.box{　　　　display:flex;　　}行内元素也可以使用Flex布局　　.box{　　　　display:inline-flex;　　}webkit内核的浏览器，必须加上-webkit前缀　　.box{　　　... 查看详情

flex布局

Flex布局教程：语法篇Flex布局教程：实例篇 查看详情

flex布局

一、Flex布局是什么？Flex是FlexibleBox的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。.box{display:flex;}行内元素也可以使用Flex布局。.box{display:inline-flex;}Webkit内核的浏览器，必须... 查看详情

flex布局

网页布局（layout）是CSS的一个重点应用。布局的传统解决方案，基于盒状模型，依赖 display属性+ position属性+ float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C提出了一种新的方案&... 查看详情

flex布局

2009年，w3c提出一个新的布局，Flex布局。可以简便，完整，响应式的各种页面布局。各种浏览器可以实现，但是有兼容性，IE10+Flex是flexiblebox的缩写，意为弹性布局。任何一个元素都可以指定为flex布局。.box{display:flex;}行内元素也... 查看详情

flex布局

Flex布局　　Flex是FlexibleBox的缩写，意为"弹性布局"。任何一个容器都可以指定为Flex布局。　　Webkit内核（Safari6.1+）的浏览器，必须加上-webkit-前缀。　　设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。 Flex布... 查看详情

flex布局（引用阮一峰老师的flex布局-语法篇）(代码片段)

一、Flex布局是什么？Flex是FlexibleBox的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。.boxdisplay:flex;行内元素也可以使用Flex布局。.boxdisplay:inline-flex;Webkit内核的浏览器，必须加上-w... 查看详情

弹性布局（flex）布局介绍

Flex是FlexibleBox的缩写，意为"弹性布局"。任何一个容器都可以指定为Flex布局，块级元素为display:block，行内元素为display:inline-flex。注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。以下是一个实现Flex基本布... 查看详情

flex布局语法篇(代码片段)

Flex布局是什么Flex是FlexibleBox的缩写，以为弹性布局，用来为盒状模型提供最大的灵活性任何一个容器都可以指定为Flex布局.boxdisplay:flex;//行内元素也可以使用Flex布局.boxdisplay:inline-flex;//注意：设为Flex布局以后，子元素的float、cle... 查看详情

flex布局教程

Flex布局教程：语法篇Flex布局教程：实例篇 查看详情

flex-弹性布局

Flex是FlexibleBox的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。如：.box{　　display:flex;}行内元素也可以使用Flex布局。.box{　　display:inline-flex;}注意，设为Flex布局以后，子元素... 查看详情

flex布局

flex布局.box{display:flex; display:-webkit-flex;/*Safari*/}　　.item1{flex:0080px; width:80px}.item2{flex:1}　　 查看详情

flex布局教程实例(代码片段)

Flex布局教程实例一、Flex布局是什么？Flex是FlexibleBox的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。.boxdisplay:flex;行内元素也可以使用Flex布局。.boxdisplay:inline-flex;Webkit内核的浏... 查看详情

flex弹性布局

flex弹性布局／2-1flexbox介绍flex弹性盒式模型。它能够更加高效方便控制元素对齐，排列，更重要的是能够自动计算布局内元素的尺寸，无论这个元素的尺寸是固定的还是动态的。   css布局模型   flex弹性布... 查看详情

css中flex布局

一、Flex布局是什么？Flex是FlexibleBox的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。.box{display:flex;}行内元素也可以使用Flex布局。.box{display:inline-flex;}Webkit内核的浏览器，必须... 查看详情