flex布局笔记

最新推荐文章于 2022-09-29 18:19:06 发布
最新推荐文章于 2022-09-29 18:19:06 发布
阅读量335 收藏 1
点赞数 1
文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aaxinger/article/details/124366569
版权

flex布局速记

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Title</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .title {
      width: 100%;
      line-height: 25px;
      padding: 2px;
      background-color: rgb(215, 169, 99);
      margin: 5px;
    }

    .box-flex {
      /* 类似与block */
      display: flex;
      width: 100%;
      background-color: bisque;
      padding: 10px;
    }

    .box-flex div {
      width: 100px;
      height: 100px;
      background-color: #2dbe8f;
      margin: 10px 10px 10px 0;
      line-height: 100px;
      text-align: center;
    }

    .box-inlie-flex {
      /* 类似inline-block不会占用整行 */
      display: inline-flex;
      background-color: bisque;
      padding: 10px;
    }

    .box-inlie-flex div {
      width: 100px;
      height: 100px;
      background-color: #2dbe8f;
      margin-right: 20px;
      line-height: 100px;
      text-align: center;
    }

    .box-inlie-flex div:last-child {
      margin-right: 0;
    }

    .box-flex-direction {
      flex-direction: row;
    }

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

    .box-flex-direction-column {
      flex-direction: column;
    }

    /* .box-flex-direction-column div {
      margin-bottom: 10px;
    } */

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

    /* .box-flex-direction-column-reverse div {
      margin-top: 10px;
    } */

    .box-flex-wrap {
      flex-wrap: wrap;
    }

    .box-flex-wrap div {
      width: 200px;
    }

    .box-flex-flow {
      flex-flow: row nowrap;
    }

    .box-justify-content {
      justify-content: flex-start;
    }

    .box-justify-content-flex-end {
      justify-content: flex-end;
    }

    .box-justify-content-center {
      justify-content: center;
    }

    .box-justify-content-space-between {
      justify-content: space-between;
    }

    .box-justify-content-space-around {
      justify-content: space-around;
    }

    .box-align-item-flex-start {
      align-items: flex-start;
    }

    .box-align-item-flex-end {
      align-items: flex-end;
    }

    .box-align-item-center {
      align-items: center;
    }

    .box-align-item-baseline {
      align-items: baseline;
    }

    .box-align-item-stretch div {
      height: auto;
    }

    .box-align-item-stretch {
      align-items: stretch;
    }

    /* 设置min-height是其一是为了对比出属性的不同, 其二因为当页面缩小，内容会超出边界 */
    .box-align-content-flex-start {
      min-height: 400px;
      align-content: flex-start;
    }

    .box-align-content-flex-end {
      min-height: 400px;
      align-content: flex-end;
    }

    /* 多行垂直居中 */
    .box-align-content-center {
      min-height: 400px;
      align-content: center;
    }

    .box-align-content-space-between {
      min-height: 400px;
      align-content: space-between;
    }

    .box-align-content-space-around {
      min-height: 400px;
      align-content: space-around;
    }

    .box-align-content-stretch div {
      height: auto;
    }

    .box-align-content-stretch {
      min-height: 400px;
      align-content: stretch;
    }

    .box-flex-grow-0 div {
      flex-grow: 0;
    }

    .box-flex-grow-1 div {
      flex-grow: 1;
    }

    /* flex-basis生效 */
    .box-flex-basis div {
      width: 100px;
      flex-basis: 300px;
    }

    .box-align-self {
      min-height: 400px
    }

    .box-align-self div:nth-child(1) {
      align-self: flex-start;
    }

    .box-align-self div:nth-child(2) {
      align-self: center;
    }

    .box-align-self div:nth-child(3) {
      align-self: flex-end;
    }
  </style>
</head>

<body>
  <!-- 容器的属性
   1、display: flex/inline-flex(容器的子元素会变成项目更深层次不会成为容器成员)
   2、flex-direction:
   3、flex-wrap
   4、flex flow
   5、justify-content
   6、align-item
   7、align-content -->
  <!--flex 布局的子元素不会脱离文档流,float会脱离文档流，注意清除浮动-->
  <div class="title">display:flex</div>
  <div class="box-flex">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>
  <div class="title">display:inline-flex</div>
  <div class="box-inlie-flex">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>
  <div class="title">flex-direction:row</div>
  <div class="box-flex box-flex-direction">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>
  <div class="title">flex-direction:row-reverse</div>
  <div class="box-flex box-flex-direction-reverse">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>
  <div class="title">flex-direction:column</div>
  <div class="box-flex box-flex-direction-column">
    <div>1</div>
    <div>3</div>
    <div>3</div>
    <div>4</div>
  </div>
  <div class="title">flex-direction:column-reverse</div>
  <div class="box-flex box-flex-direction-column-reverse">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>
  <!-- 换行,默认nowrap不换行 -->
  <div class="title">flex-wrap:nowrap</div>
  <div class="box-flex">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
  </div>
  <div class="title">flex-wrap:wrap</div>
  <div class="box-flex box-flex-wrap">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
  </div>
  <div class="title">flex-flow:该属性是flex-direction与flex-wrap属性的简写默认值为row nowrap</div>
  <div class="box-flex box-flex-flow">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>
  <div class="title">justify-content:该属性是主轴整体的对其方式 flex-start|flex-end|center|space-between|space-around</div>
  <div class="title">justify-content:flex-start</div>
  <div class="box-flex box-justify-content">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>
  <div class="title">justify-content:flex-end</div>
  <div class="box-flex box-justify-content-flex-end">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>
  <div class="title">justify-content:center</div>
  <div class="box-flex box-justify-content-center">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>
  <!-- 可以创造左右两个盒子一个居左一个居右，中间盒子居中的格局 -->
  <div class="title">justify-content:space-between: 两端对其项目中间间隔都相等</div>
  <div class="box-flex box-justify-content-space-between">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
  <div class="title">justify-content:space-around: 两侧间隔相等，项目之间的间隔比项目与边框的间隔大一倍</div>
  <div class="box-flex box-justify-content-space-around">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>
  <!-- align-item属性定义了项目在交叉轴上如何对齐 flex-start|flex-end|center|baseline|stretch -->
  <div class="title">align-item:flex-start: 交叉轴起点对齐</div>
  <div class="box-flex box-align-item-flex-start">
    <div>1</div>
    <div style="height: 200px;">2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>
  <div class="title">align-item:flex-end: 交叉轴终点对齐</div>
  <div class="box-flex box-align-item-flex-end">
    <div>1</div>
    <div>2</div>
    <div style="height: 200px;">3</div>
    <div>4</div>
    <div>5</div>
  </div>
  <div class="title">align-item:center: 交叉轴中间对齐</div>
  <div class="box-flex box-align-item-center">
    <div>1</div>
    <div>2</div>
    <div style="height: 200px;">3</div>
    <div>4</div>
    <div>5</div>
  </div>
  <div class="title">align-item:baseline: 交叉轴基线对齐</div>
  <div class="box-flex box-align-item-baseline">
    <div>1</div>
    <div>2</div>
    <div style="height: 200px;line-height: 50px;">3</div>
    <div>4</div>
    <div>5</div>
  </div>
  <div class="title">align-item:stretch(默认值): 如果项目未设置高度或者为auto,将占满整个容器的高度</div>
  <div class="box-flex box-align-item-stretch">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>
  <!-- align-content属性定义了多根轴线(多行)，在交叉轴上的对齐方式
  如果项目只有一根轴线该属性不起作用 flex-start|flex-end|center|space-between|space-around|stretch -->
  <div class="title">align-content:flex-start:交叉轴起点对其</div>
  <div class="box-flex box-flex-wrap box-align-content-flex-start">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
  </div>
  <div class="title">align-content:flex-end:交叉轴终点对其</div>
  <div class="box-flex box-flex-wrap box-align-content-flex-end">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
  </div>
  <div class="title">align-content:center:交叉轴中点对齐</div>
  <div class="box-flex box-flex-wrap box-align-content-center">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
  </div>
  <div class="title">align-content:space-between:交叉轴两端对齐，中间间隔相等</div>
  <div class="box-flex box-flex-wrap box-align-content-space-between">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
  </div>
  <div class="title">align-content:space-around:交叉轴两端相等，中间间隔是两端间隔的两倍</div>
  <div class="box-flex box-flex-wrap box-align-content-space-around">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
  </div>
  <div class="title">align-content:stretch如果盒子没有设置高度或者高度为auto,所有盒子将撑满整个容器的高度</div>
  <div class="box-flex box-flex-wrap box-align-content-stretch">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
  </div>
  <!-- 项目的属性
  1.order
  2.flex-grow
  3.flex-shrink
  4.flex-basis
  5.flex
  6.align-self
  -->
  <div class="title">order属性定义项目的排列顺序,数值越小排列越靠前,默认为零</div>
  <div class="box-flex">
    <div style="order: 1;">1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>
  <div class="title">flex-grow属性定义项目的放大比例,默认为零，即如果存在剩余空间，也不放大</div>
  <div class="title">如果所有的flex-grow属性都设置为1，则他们将等分剩余空间</div>
  <div class="title">flex-grow设置为0</div>
  <div class="box-flex box-flex-grow-0">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>
  <div class="title">flex-grow设置为1</div>
  <div class="box-flex box-flex-grow-1">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>
  <div class="title">如果有的项目有flex-grow属性,有的项目设置width属性,有flex-grow属性的项目将会等分剩余空间</div>
  <div class="box-flex">
    <div style="width: 300px;">1</div>
    <div style="flex-grow: 2;">2</div>
    <div style="flex-grow: 1;">3</div>
    <div style="flex-grow: 1;">4</div>
  </div>
  <div class="title">flex-shrink属性定义项目的缩小比例,默认为1,即如果空间不足,该项目将缩小</div>
  <div class="title">如果所有的flex-shrink属性都设置为1,当空间不足时,都将等比例缩小,如果一个项目的flex-shrink属性为0,其他项目都为1,则当空间不足时,前者不缩小,负值对该属性无效</div>
  <div class="title">flex-shrink设置为0</div>
  <div class="box-flex">
    <div style="width: 90%;flex-shrink: 0;">1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>
  <div class="title">flex-basis指定了 flex 元素在主轴方向上的初始大小,默认值为auto,如果不使用 box-sizing 改变盒模型的话，那么这个属性就决定了 flex 元素的内容盒的尺寸</div>
  <div class="title">flex-basis比width具有更高的优先级</div>
  <div class="box-flex box-flex-basis">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>
  <div class="title">flex属性指定了 flex属性是flex-grow,flex-shrink,flex-basis的简写,默认值为0 1 auto</div>
  <div class="title">align-self属性允许单个项目有与其他项目不一样的对其方式</div>
  <div class="box-flex box-align-self">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</body>

</html>

2022-4-23 加油！！！

荡子行不归
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Flex布局笔记
墨苒孤的博客
04-03 266
felx-direction 共有四个值：分别为 row（默认值），row-reverse（右往左），column（上往下），column-reverse（下往上）可以规定子元素在父元素中的排列方式：如居中对齐，平均分配空间，两边贴边中间平均分配空间等等。值为space-between 所有子元素先两边贴边在平分剩余空间。值为flex-start 所有子元素在主轴头部显示（默认值）值为flex-center 所有子元素在主轴居中对齐。值为flex-end 所有子元素在主轴尾部显示。
Flex学习笔记
yifan6688的博客
02-24 131
一、基础介绍Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。二、基础属性决定主轴的方向如果一条轴线排不下，如何换行是flex-direction属性和flex-wrap属性的简写形式定义了项目在主轴上的对齐方式。定义项目在交叉轴上如何对齐。6 align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用三、项目属性。
flex布局（学习笔记）
Z_Gleng的博客
09-29 2327
align-self属性允许单个项目与其他项目不一样的对齐方式，可覆盖align-items属性，默认值为auto,表示继承父元素align-items属性，如果没有父元素，则等同与stretch。②：采用flex布局的元素，称为flex容器（flex contaniner）,简称’容器‘，他的所有子元素自动成为容器成员，成为flex项目（flex item）,简称’项目‘注意：主轴和测轴是会变化的，就看flex-direction设置谁为主轴，剩下的就是测轴，而我们的子元素是跟着主轴来排列的。
Flex 布局笔记
DJCBPL的专栏
02-10 600
Flex 布局由容器flex container和项目flex item两部分组成，容器默认存在两根轴：水平的主轴main axis和垂直的交叉轴cross axis，项目默认以主轴排列。 Flex 属性包括容器属性和项目属性两部分，容器上可设置：flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content6 个属性，项目上同样可设置 6 个属性，分别为：order、flex-grow、flex-shrink、fle
flex布局笔记flex布局笔记
04-03
flex布局笔记
Flex布局笔记.docx
12-07
关于Flex布局的笔记整理，能够详细理解Flex布局原理和用法，仅供自己学习。
Flex 3 布局容器学习笔记 整理
10-29
国庆期间，做了不少基于 flex 的开发工作，对 flex 的布局容器有了进一步深入的理解，也找到不少非常棒的文章，分享到这里方便一下大家。
flex弹性布局用法笔记
01-20
flex弹性布局display:flex介绍1.flex-direction:row|row-reverse|column|column-reverse|initial|inherit (盒子排列方向)2.flex-wrap: nowrap|wrap|wrap-reverse(拆行或拆列)附加：flex-flow（1，2的结合写法）3....
水牛01248：flex布局学习笔记
03-29
flex布局实现需要至少两层控件,外层叫做容器,内部的叫做项目(item).类似于Android里的ViewGroup和里面装的View。 容器分两个轴,水平的主轴（main axis）和竖直方向的交叉轴（cross axis）,就相当于盒子模型中的xy轴,...
flex学习笔记
cj_010407的博客
04-15 437
学习笔记
flex笔记
寂静的专栏
07-11 159
flex笔记 1.flex布局基础概念 q. 什么是flex flex布局弹性布局,也叫做弹性盒子布局 理解: 一个盒子放气球 出现时间: 2012左右 q. 什么是容器container,什么是项目item 一个大div放三个小div, 大div是容器,小div是项目 q. 什么是主轴,什么是交叉轴? 主轴默认从左到右 交叉轴默认从上到下 ...
flex布局学习笔记
weixin_47023786的博客
10-27 174
文章目录flex布局(伸缩布局)主轴方向（flex-direction）（了解）主轴对齐方式（justify-content）（重点）单行侧轴对齐方式（align-items）（重点）是否换行（flex-wrap）多行侧轴对齐方式（align-content）----------------分配子元素空间（flex属性）子元素排序（order属性）单个子元素侧轴对齐方式（align-self） flex布局(伸缩布局) flex布局也叫做弹性布局、伸缩布局 布局：其实就是调整元素在水平和垂直方向上的布局方
flex布局快速学习笔记
淮枳
08-15 460
由于想做一个移动app，传统布局略麻烦，想快速上手flex，参考阮一峰老师的博客写下笔记。 布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 1.flex布局是什么 任何一个容器都可以指定为 Flex 布局。display:flex; 行内元素也可以使用flex布局：dis...
flex 布局【笔记】
wanghuan1020的博客
05-05 524
flex 布局认识 flex 布局flex 布局模型flex 相关的属性应用在 flex container 上的 CSS 属性`flex-direction``justify-content``align-items``flex-wrap``flex-flow``align-content`应用在 flex items 上的 CSS 属性`order``align-self``flex-grow``flex-shrink``flex-basis``flex` 认识 flex 布局 弹性盒子是一种用于按行
第1关：使用flex布局实现educoder顶部导航栏容器布局
最新发布
06-28
好的，以下是使用flex布局实现educoder顶部导航栏容器布局的代码： HTML代码： ``` <div class="logo">educoder 首页 课程 问答 讨论 笔记 我的 ``` CSS代码： ``` .nav-container { display: ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值