百度360必应搜狗淘宝本站头条
HTML APICSS 语法HTML 游戏HTML5 支持CSS 谷歌字体
当前位置：网站首页 > 技术文章 > 正文

CSS:前端必会的flex布局，我把布局代码全部展示出来了

myzbx 2025-03-06 17:35 18 浏览

进入我的主页，查看更多CSS的分享！

首先呢，先去看文档，了解flex是什么，这里不做赘述。

当然，可以看下面的代码示例，辅助你理解。

一、row

将子元素在水平方向进行布局：

1. 垂直方向靠顶部，水平方向靠左侧

.row-ll {
  display: flex;/* 定义flex */
  flex-direction: row;/* 默认值*/
  align-items: flex-start;/* 默认值*/
  justify-content: flex-start;/* 默认值*/
}

示例：


  
我是div

  
  text

2. 垂直方向靠顶部，水平方向居中

.row-lc {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
}

3.垂直方向靠顶部，水平方向两端对齐

.row-lsb {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
}

4. 垂直方向靠顶部，水平方向平均分隔（中间间隔的宽度为两边间隔宽度的2倍）

.row-lsa {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-around;
}

5. 垂直方向靠顶部，水平方向平均分隔（间隔距离相等）

.row-lse {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-evenly;
}

6. 垂直方向靠顶部，水平方向靠右侧

.row-le {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-end;
}

7. 垂直方向可以设置为：靠顶部、居中、靠底部

前面6个是（垂直方向）靠顶部的效果，且（垂直方向）居中、靠底部的代码类似，如下：

/* 垂直方向居中，水平方向靠左侧 */
.row-cl {
  display: flex;
  flex-direction: row;
  align-items: cenetr;
  justify-content: flex-start;
}
/* 垂直方向居中，水平方向居中 */
.row-cc {
  display: flex;
  flex-direction: row;
  align-items: cenetr;
  justify-content: cenetr;
}
/* 垂直方向居中，水平方向平均间隔（中间间隔的宽度为两边间隔宽度的2倍） */
.row-csa {
  display: flex;
  flex-direction: row;
  align-items: cenetr;
  justify-content: space-around;
}
/* 垂直方向居中，水平方向两端对齐 */
.row-csb {
  display: flex;
  flex-direction: row;
  align-items: cenetr;
  justify-content: space-between;
}
/* 垂直方向居中，水平方向平均间隔（间隔距离相等） */
.row-cse {
  display: flex;
  flex-direction: row;
  align-items: cenetr;
  justify-content: space-evenly;
}
/* 垂直方向居中，水平方向靠右侧 */
.row-ce {
  display: flex;
  flex-direction: row;
  align-items: cenetr;
  justify-content: flex-end;
}
/* 垂直方向居底部，水平方向靠左侧 */
.row-el {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: flex-start;
}
/* 垂直方向居底部，水平方向居中 */
.row-ec {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: cenetr;
}
/* 垂直方向居底部，水平方向平均间隔 */
.row-esa {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-around;
}
/* 垂直方向居底部，水平方向两端对齐 */
.row-esb {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
}
/* 垂直方向居底部，水平方向平均间隔 */
.row-ese {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-evenly;
}
/* 垂直方向居底部，水平方向靠右侧 */
.row-ee {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: flex-end;
}

二、column

将子元素在垂直方向进行布局：

1. 垂直方向靠顶部，水平方向靠左侧

.col-ll {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

2. 垂直方向靠居中，水平方向靠左侧

.col-lc {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

3. 垂直方向两端对齐，水平方向靠左侧

.col-lsb {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
}

4. 垂直方向平均间隔（中间间隔的宽度为两边间隔宽度的2倍），水平方向靠左侧

.col-lsa {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-around;
}

5. 垂直方向平均间隔（间隔距离相等），水平方向靠左侧

.col-lse {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-evenly;
}

6. 垂直方向靠底部，水平方向靠左侧

.col-le {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
}

7. 水平方向可以设置为：靠顶部、居中、靠底部

前面6个是（水平方向）靠顶部的效果，且（水平方向）居中、靠底部的代码类似，如下：

/* 垂直方向靠顶部，水平方向居中 */
.col-cl {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
/* 垂直方向居中，水平方向居中 */
.col-cc {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
/* 垂直方向平均间隔，水平方向居中 */
.col-csa {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}
/* 垂直方向两端对齐，水平方向居中 */
.col-csb {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
/* 垂直方向平均间隔，水平方向居中 */
.col-cse {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
}
/* 垂直方向靠底部，水平方向居中 */
.col-ce {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}
/* 垂直方向靠顶部，水平方向靠底部 */
.col-cl {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
}
/* 垂直方向居中，水平方向靠底部 */
.col-cc {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
}
/* 垂直方向平均间隔，水平方向靠底部 */
.col-csa {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-around;
}
/* 垂直方向两端对齐，水平方向靠底部 */
.col-csb {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
}
/* 垂直方向平均间隔，水平方向靠底部 */
.col-cse {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-evenly;
}
/* 垂直方向靠底部，水平方向靠底部 */
.col-ce {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
}

三、更多属性

菜鸟教程(
https://www.runoob.com/css3/css3-flexbox.html)

四、代码太多了也有重复，好乱啊

我参考了vuetify的预置css，flex.css可以这么写：

.d-flex {
  display: flex;
}
.flex-row {
  flex-direction: row;
}
.flex-wrap {
  flex-wrap: wrap;
}
.flex-wrap-reverse {
  flex-wrap: wrap-reverse;
}
.flex-row-reverse {
  flex-direction: row-reverse;
}
.flex-column {
  flex-direction: column;
}
.flex-column-reverse {
  flex-direction: column-reverse;
}
.align-start {
  align-items: flex-start;
}
.align-center {
  align-items: center;
}
.align-end {
  align-items: flex-end;
}
.justify-start {
  justify-content: flex-start;
}
.justify-center {
  justify-content: center;
}
.justify-space-around {
  justify-content: space-around;
}
.justify-space-between {
  justify-content: space-between;
}
.justify-space-evenly {
  justify-content: space-evenly;
}

示例：




    垂直居中，水平居中




    垂直居中，水平两端对齐

有补充请在评论区留言。

相关推荐

C语言速成之数组:C语言数据处理的核心武器，你真的玩透了吗?

程序员Feri一名12年+的程序员,做过开发带过团队创过业,擅长Java、鸿蒙、嵌入式、人工智能等开发,专注于程序员成长的那点儿事,希望在成长的路上有你相伴！君志所向,一往无前！数组：C语言数据处理...

ES6史上最全数JS数组方法合集-02-数组操作

数组生成array.ofletres=Array.of(1,2,3)console.log(res)//[1,2,3]下标定位indexOf用于查找数组中是否存在某个值，如果存...

前端性能拉胯?这 8 个 JavaScript 技巧让你的代码飞起来!

在前端开发的江湖里，JavaScript就是我们手中的“绝世宝剑”。但为啥别人用剑就能轻松斩敌，你的代码却总拖后腿，页面加载慢、交互卡顿？别着急！今天带来8个超实用的JavaScript实...

12种JavaScript中最常用的数组操作整理汇总

数组是最常见的数据结构之一，我们需要绝对自信地使用它。在这里，我将列出JavaScript中最重要的几个数组常用操作片段，包括数组长度、替换元素、去重以及许多其他内容。1、数组长度大多数人都知道可...

手把手教你在Webpack写一个Loader

前言有的时候，你可能在从零搭建Webpack项目很熟悉，配置过各种loader,面试官在Webpack方面问你，是否自己实现过一个loader?如果没有去了解过如果去实现，确实有点尴尬，其...

const关键字到底该什么用?（可以用const关键字定义变量吗）

文|守望先生经授权转载自公众号编程珠玑(id：shouwangxiansheng)前言我们都知道使用const关键字限定一个变量为只读，但它是真正意义上的只读吗？实际中又该如何使用const关键字...

“JavaScript变量声明三兄弟，你真的会用吗?

在JavaScript中，var、let和const是声明变量的关键字，它们在作用域、变量提升、重复声明和重新赋值等方面有显著区别。以下是它们的相同点和不同点，并通过代码示例详细说明。一、相同点声明变...

ES6(二)let 和 const（es6 var let const区别）

let命令let和var差不多，只是限制了有效范围。先定义后使用不管是什么编程语言，不管语法是否允许，都要秉承先定义，然后再使用的习惯，这样不会出幺蛾子。以前JavaScript比较随意，...

js 里面 let 和 const的区别（js中的let）

在JavaScript（包括Vue、Node.js、前端脚本等）中，const和let是用于声明变量的两种方式，它们的主要区别如下：constvslet的区别特性constlet是否...

JDK21新特性:Sequenced Collections

SequencedCollectionsJDK21在JEP431提出了有序集合（SequencedCollections）。引入新的接口来表示有序集合。这样的集合都有一个明确的第一个元素、第二个...

动态编程基础——第 2 部分（动态编程是什么）

有两种方法可以使用动态规划来解决问题。在这篇文章中，我们将了解制表法。请参阅我的动态编程基础——第1部分了解记忆方法。记忆制表什么是动态规划？它是一种简单递归的优化技术。它大大减少了解决给定...

Lambda 函数，你真的的了解吗（lambda函数用法）

什么是lambda函数lambda函数是一个匿名函数，这意味着与其他函数不同，它们没有名称。这是一个函数，它添加两个数字，写成一个命名函数，可以按其名称调用它们：defadd(x,y):...

JavaScript 数组操作方法大全（js数组操作的常用方法有哪些）

数组操作是JavaScript中非常重要也非常常用的技巧。本文整理了常用的数组操作方法（包括ES6的map、forEach、every、some、filter、find、from、of等）...

系列专栏(六):解构赋值（解构赋值默认值）

ES6作为新一代JavaScript标准，已正式与广大前端开发者见面。为了让大家对ES6的诸多新特性有更深入的了解，MozillaWeb开发者博客推出了《ES6InDepth》系列文章。CSDN...

js列表遍历方法解读（js遍历链表）

JavaScript提供了多种遍历数组（或列表）的方法。以下是一些常用的方法及其解读：for循环：vararray=[1,2,3,4,5];for(vari=0;...

一周热门
最近发表
标签列表