正文

flex布局--必然的选择

王小宾  王小宾  2022-09-10  603

关键词：

这篇文章是我在阮一峰老师的flex布局教程下，按照自己的理解重写写一遍，以便增强理解。如果你来到这里最好去看一下阮一峰大神的Flex布局教程

正式开始自己的。

说起布局方式，大家首先要了解css3有哪些布局方式，这里就不一一详解了。网上一大堆，而且平时写css3的时候大家一般也都会用到。

Flex布局：

1.概念：flex布局，英文全称为：Flexible Box 也就是弹性盒子的意思。设置flex布局的元素叫做容器，其他的子元素叫做项目。恩，我之前还真不知道叫做项目，没注意过。在容器中存在着两根轴：主轴（水平）和交叉轴（垂直）。

然后我们先创建一个正常的li列表

<div>
    <ul>
        <li>first</li>
        <li>second</li>
        <li>third</li>
        <li>forth</li>
        <li>fifith</li>
    </ul>
</div>

在简单设置一下css样式，也不能太难看

  div{
      height: 500px;
      width: 500px;
      margin:0 auto;
      background-color: #333;
  }
  ul{
      padding: 20px;
      box-sizing: border-box;
  }
    div li{
        list-style: none;
        display: block;
        width: 200px;
        height:50px;
        text-align: center;
        line-height: 50px;
        font-size: 30px;
　　　　　margin：10px;
    }
    li:nth-child(n){
        background-color: #007aff;
    }
    li:nth-child(2n){
        background-color: #8a6de9;
        color: #fff;
    }

最终展现在我们眼前的效果就是

这个留着备用，我们继续开始下面的流程。

2.作用在容器上面的6大属性

         flex-direction
         align-items
         justify-content
         align-content
         flex-wrap
         flex-flow

2.1首先看第一个flex-direction属性

在之前我们设置好得li列表上面我们做一下改动，给div增加新的样式，为了方便容易看，我就直接在之前的样式后面继续为 div 下ul元素添加样式。

   div ul{
        display: flex;
    }

看一下效果

从原本的横向排列，变成了纵向排列。而且之前我们设置的每个li 的宽度已经不起作用了。当我们设置display:flex;的时候，主轴默认的方向是水平方向也就是我们看到的样子。所以我们可以通过改变主轴的方向来随意调整我们li的排列方式。

        /*设置主轴方向为垂直方向*/
        flex-direction: column;
        /*设置主轴方向为垂直方向，从下往上*/
        flex-direction: column-reverse;
        /*设置主轴方向为水平方向，从左往右*/
        flex-direction: row;
        /*设置主轴方向为水平方向，从右往左*/
        flex-direction: row-reverse;
        flex-direction: inherit;

flex-direction有五个属性，也可以说四个，毕竟最后一个可以省去。我们只要记着两个就行，column代表着垂直方向，row代表着水平方向。

2.2、这里我们看一下flex-wrap属性。

上面我们看到，设置成flex布局之后，li的宽度发生了变化，而且没有换行，挤在了一起。给样式加上flex-wrap之后，看一下

    div ul{
        display: flex;
        flex-wrap: wrap;
    }

flex-wrap，默认是nowrap。不换行。所以就导致了我们之前的那种情况，现在我们设置成wrap，让他根据宽度来决定是否换行。这样一来，就和float一样了。而且更加方便。flex-wrap还有一个属性

    div ul{
        display: flex;
        flex-wrap: wrap-reverse;
    }

也就是颠倒个个。

2.3flex-flow也就是flex-direction和flex-wrap的结合体，没什么好说的啦！

2.4justify-content

    div ul{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

也就是设置垂直方向的排列方式，center就是居中。另外还有其他属性space-between;space-around;这两个属性可以说是我经常用到的属性。

2.4align-item这个就是水平方向的设置了。也justify-content相对应。也就不举栗子了。

2.5align-content属性定义的是多根线轴的对齐方式。具体样式也上面那两位几乎一样的。

3、在项目上的6大属性。

        order
        flex-grow
        flex-shrink
        flex-basis
        align-self

3.1、order，设置数值，数值越小越靠前。例如我们给最后一个li添加order属性。设置为-1，样式为

    li:last-child{
        order: -1;
    }

可以看到第五个fifth排到了第一位！！这就很方便了。也很实用，说实话，我刚刚发现这个属性的时候就想发现新大陆一样激动（鬼知道哥伦布怎么想的）

3.2、flex-grow属性。设置放大比例，默认值是0，例如我们给最后一个li增加属性

    li:last-child{
      flex-grow: 1;
    }

3.3、flex-shrink就是缩小比例了。这个就不多说了。

3.4、flex-basis属性则定义了在分配多余空间之前，项目占据的主轴空间。

3.5、flex属性就是结合体.....我不是很熟练。还是一个个写吧

3.6、align-self也就是一个特立独行的存在。改变自己的排列方式。

flex布局grid布局（入门初体验）(代码片段)

两种布局都可以极大简化排版布局的步骤，都是直接作用于自己的排版（比如：现在ul上，ul>li就会自动进行排版）flex布局：一般用于单行排版display:flex;justify-content:space-evenly;//属性值可以在打印窗口调试，选择合适的。flex-flo... 查看详情

前端知识——css之flex布局(代码片段)

1.基本概念flex布局是一种布局模型，经常被称之为flexbox，使用flex布局之后，他会给子元素提供强大空间分配和对齐能力。在没有使用flex布局之前，常用布局有：流式布局，浮动布局，定... 查看详情

flex布局

布局原理 flex是flexibleBox的缩写意为:"弹性布局"用来为盒状模型提供最大的灵活性任何一个容器都可以指定为flex布局当我们为父盒子设置为flex布局以后子元素的floatclear和vertical-align属性将会失效伸缩布局=弹... 查看详情

flex布局

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

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

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

flex弹性布局

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

css之flex兼容

...就要做些兼容性处理。我写页面的时候用到过很多的flex布局，觉得非常好用。下面附上一篇不错的flex布查看详情

flex布局

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

grid布局和flex布局的区别

1. 什么是Grid布局Grid布局及网格布局，是一种新的css模型，一般是将一个页面划分成几个主要的区域，定义这些区域的大小、位置和层次等关系，是目前唯一一种css二维布局。2.什么是flex布局flex是flexibleBox的缩写，意为“... 查看详情

css动效实战（纯css与js动效）02flex布局实战（仿jd及gitcode布局）及media自适应初探(代码片段)

一、flex仿JD布局首先，我们在编辑器中，写上基础代码，当然要在style中加上一个flex类，用于flex布局的定义，这个是必然需要的，在此一定得加上。<!DOCTYPEhtml><htmllang="en"><head><metac... 查看详情

flex布局

1.什么是Flex布局Flex是flexibleBox的缩写，意为“弹性布局”，用来为盒装模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。链接参考2.基本概念采用Flex布局的元素，称为容器(flexcontainer),简称‘容器’。它的所有子元素... 查看详情

flex布局

flex弹性布局

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

flex布局

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

flex布局

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

flex-弹性布局

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

flex布局：flex布局

参考技术A传统布局：flex布局：使用范围：1、如果是PC端页面布局，建议使用传统布局2、如果是移动端或者不考虑兼容性问题的PC端，建议使用flex弹性布局flex意为弹性布局，通过给父盒子添加flex属性，来控制子盒子的位置和排... 查看详情

flex布局

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