【CSS】彻底搞懂flex页面布局,附最佳实践代码

最新推荐文章于 2024-04-23 00:30:00 发布
最新推荐文章于 2024-04-23 00:30:00 发布
阅读量2.1k 收藏 8
点赞数 2
文章标签： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36321909/article/details/91900806
版权

核心的几个属性：

flex-direction: row | row-reverse | column | column-reverse | initial | inherit;

在这里插入图片描述

flex Three values: flex-grow | flex-shrink | flex-basis | auto | initial | inherit;

在这里插入图片描述

flex-wrap: nowrap | wrap | wrap-reverse | initial | inherit;

在这里插入图片描述

align-content: stretch | center | flex-start | flex-end | space-between | space-around | initial | inherit;

在这里插入图片描述

align-item: stretch | center | flex-start | flex-end | baseline | initial | inherit;

在这里插入图片描述

align-self: auto | stretch | center | flex-start | flex-end | baseline | initial | inherit;

在这里插入图片描述

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

在这里插入图片描述

语法详解,请猛戳这里，大牛的文章

这里引用该文章的几张总结图
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

最后,骰子练习走一波(附上源码)

效果图
以上是实际效果展示；

<div style="display: flex">
    <div class="fcnt fcnt1">
      <div class="cnt"></div>
    </div>
    <div class="fcnt fcnt2">
      <div class="cnt"></div>
    </div>
    <div class="fcnt fcnt3">
      <div class="cnt"></div>
    </div>
    <div class="fcnt fcnt4">
      <div class="cnt"></div>
    </div>
    <div class="fcnt fcnt5">
      <div class="cnt"></div>
    </div>
    <div class="fcnt fcnt6">
      <div class="cnt"></div>
    </div>
    <div class="fcnt fcnt7">
      <div class="cnt"></div>
    </div>
    <div class="fcnt fcnt8">
      <div class="cnt"></div>
    </div>
    <div class="fcnt fcnt9">
      <div class="cnt"></div>
    </div>
  </div>
  <div style="display: flex;margin-top: 10px;">
    <div class="fcnt fcnt11">
      <div class="cnt"></div>
      <div class="cnt"></div>
    </div>
    <div class="fcnt fcnt12">
      <div class="cnt"></div>
      <div class="cnt"></div>
    </div>
    <div class="fcnt fcnt13">
      <div class="cnt"></div>
      <div class="cnt"></div>
    </div>
    <div class="fcnt fcnt14">
      <div class="cnt"></div>
      <div class="cnt"></div>
    </div>
    <div class="fcnt fcnt15">
      <div class="cnt"></div>
      <div class="cnt"></div>
    </div>
    <div class="fcnt fcnt16">
      <div class="cnt"></div>
      <div class="cnt"></div>
    </div>
    <div class="fcnt fcnt17">
      <div class="cnt"></div>
      <div class="cnt"></div>
    </div>
    <div class="fcnt fcnt18">
      <div class="cnt"></div>
      <div class="cnt"></div>
    </div>
    <div class="fcnt fcnt19">
      <div class="cnt"></div>
      <div class="cnt"></div>
    </div>
  </div>
  <div style="display: flex;margin-top: 10px;">
    <div class="fcnt fcnt21">
      <div class="cnt"></div>
      <div class="cnt"></div>
      <div class="cnt"></div>
    </div>
    <div class="fcnt fcnt22">
      <div class="cnt"></div>
      <div class="cnt"></div>
      <div class="cnt"></div>
    </div>
    <div class="fcnt fcnt23">
      <div class="cnt"></div>
      <div class="cnt"></div>
      <div class="cnt"></div>
    </div>
    <div class="fcnt fcnt24">
      <div class="cnt"></div>
      <div class="cnt"></div>
      <div class="cnt"></div>
    </div>
  </div>
  <div style="display: flex;margin-top: 10px;">
    <div class="fcnt fcnt31">
      <div class="rows">
        <div class="cnt"></div>
        <div class="cnt"></div>
      </div>
      <div class="rows">
        <div class="cnt"></div>
        <div class="cnt"></div>
      </div>
    </div>
    <div class="fcnt fcnt32">
      <div class="rows">
        <div class="cnt"></div>
        <div class="cnt"></div>
      </div>
      <div class="rows">
        <div class="cnt"></div>
      </div>
      <div class="rows">
        <div class="cnt"></div>
        <div class="cnt"></div>
      </div>
    </div>
    <div class="fcnt fcnt32">
      <div class="rows">
        <div class="cnt"></div>
        <div class="cnt"></div>
      </div>
      <div class="rows">
        <div class="cnt"></div>
      </div>
      <div class="rows">
        <div class="cnt"></div>
        <div class="cnt"></div>
        <div class="cnt"></div>
      </div>
    </div>
    <div class="fcnt fcnt31">
      <div class="rows">
        <div class="cnt"></div>
        <div class="cnt"></div>
        <div class="cnt"></div>
      </div>
      <div class="rows">
        <div class="cnt"></div>
        <div class="cnt"></div>
        <div class="cnt"></div>
      </div>
    </div>
    <div class="fcnt fcnt33">
      <div class="rows">
        <div class="cnt"></div>
        <div class="cnt"></div>
        <div class="cnt"></div>
      </div>
      <div class="rows">
        <div class="cnt"></div>
        <div class="cnt"></div>
        <div class="cnt"></div>
      </div>
    </div>
  </div>

以上是html布局

.fcnt {
  display: flex;
  flex: 0 0 auto; // 固定尺寸
  width: 100px;
  height: 100px;
  margin-right: 10px;
  background: #777;
  border-radius: 5px;
}
.cnt {
  height: 30px;
  width: 30px;
  background: #fff;
  border-radius: 30px;
}
.fcnt1 {
  justify-content: flex-start;
}
.fcnt2 {
  justify-content: center;
}
.fcnt3 {
  justify-content: flex-end;
}
.fcnt4 {
  justify-content: flex-start; // 主轴对齐方式
  align-items: center; // 交叉轴单行对齐方式
}
.fcnt5 {
  justify-content: center;
  align-items: center;
}
.fcnt6 {
  justify-content: flex-end;
  align-items: center;
}
.fcnt7 {
  justify-content: flex-start;
  align-items: flex-end;
}
.fcnt8 {
  justify-content: center;
  align-items: flex-end;
}
.fcnt9 {
  justify-content: flex-end;
  align-items: flex-end;
}
.fcnt11 {
  justify-content: space-between;
  align-items: flex-start;
}
.fcnt12 {
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}
.fcnt13 {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  div:nth-child(2) {
    align-self: center;
  }
}
.fcnt14 {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  div:nth-child(2) {
    align-self: flex-end;
  }
}
.fcnt15 {
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  div:nth-child(2) {
    align-self: center;
  }
}
.fcnt16 {
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  div:nth-child(2) {
    align-self: flex-end;
  }
}
.fcnt17 {
  flex-direction: column-reverse;
  justify-content: flex-start;
  div:nth-child(2) {
    align-self: flex-end;
  }
}
.fcnt18 {
  justify-content: space-between;
  align-items: flex-end;
}
.fcnt19 {
  justify-content: space-between;
  align-items: flex-end;
  div:nth-child(2) {
    align-self: flex-start;
  }
}
.fcnt21 {
  flex-direction: column;
  justify-content: space-between;
}
.fcnt22 {
  flex-direction: column;
  justify-content: space-between;
  div:nth-child(2) {
    align-self: center;
  }
  div:nth-child(3) {
    align-self: flex-end;
  }
}
.fcnt23 {
  flex-direction: column-reverse;
  justify-content: space-between;
  div:nth-child(2) {
    align-self: center;
  }
  div:nth-child(3) {
    align-self: flex-end;
  }
}
.fcnt24 {
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
}
.fcnt31 {
  flex-wrap: wrap;
  align-content: space-between; // 根据内容，必须与wrap配合同时使用
  .rows {
    flex-basis: 100%;
    display: flex;
    justify-content: space-between;
  }
}
.fcnt32 {
  flex-wrap: wrap;
  align-content: space-between;
  .rows {
    flex-basis: 100%;
    display: flex;
    justify-content: space-between;
    &:nth-child(2) {
      justify-content: center;
    }
  }
}
.fcnt33 {
  flex-direction: column;
  flex-wrap: wrap;
  align-content: space-between;
  .rows {
    flex-direction: column;
    flex-basis: 100%;
    display: flex;
    justify-content: space-between;
  }
}

以上是css样式表

To-Infinity
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Flex布局：打造灵动、响应式网页设计的利器
JINGWHALE
06-11 864
Flex布局，又称弹性盒布局，是现代CSS布局体系中的璀璨明珠。它以革命性的理念革新了传统的网页布局方式，为设计师和开发者提供了前所未有的灵活性与便捷性。本篇内容精讲将引领您全方位领略Flex布局的魅力，深入剖析其工作原理与核心属性，助您在实践中轻松驾驭复杂、响应式的网页设计。
CSS中的浮动与清除浮动
weixin_44196299的博客
07-28 552
在CSS中跳出标准文档流的方式有三种：浮动、绝对定位和固定定位，其中绝对定位和固定定位在我的另一篇博客CSS中的定位中有了比较详细的介绍，这篇博客希望能跟大家一起讨论CSS中的浮动。 浮动属性最早提出是在CSS1中，其最初的主要目的就是为了允许其他内容（如文本）“围绕”图像，因此浮动属性也只允许作用于图像（有些浏览器还支持表格），后来随着不断发展，浮动属性也允许作用于任何元素，但是文本环绕这一页面...
CSS初学者必须掌握的14个实践小技巧
WPHunter的编程技术资料库！
01-03 1067
当您开始使用网页设计时，让一切正常工作并查看您希望它看起来如何的关键元素落在 CSS 手中。这是层叠样式表的缩写，它们允许您以任何您想要的方式设置HTML元素的样式。虽然您可以通过多种方式尝试CSS（通常是内联方式），但还有更好的方式来实现它。这符合您应该遵循的一系列最佳实践，以确保您的代码功能正常、没有不必要的体积并且组织良好。今天，我们将为初学者重点介绍14个CSS最佳实践，但即使是经验丰富的专业人士有时也应该复习基础知识。
CSS笔记
vscode2021的博客
07-28 2190
css笔记
10个前端最新热点面试中常见的CSS面试题及其答案与解析
man2017的博客
04-23 687
综上所述，CSS Grid布局是一种强大且灵活的布局工具，它革新了网页设计的方式，使开发者能够更高效、直观地创建复杂、响应式的网页布局，提升了代码的可维护性和性能。它提供了对网页元素在水平和垂直方向上的精细控制，彻底改变了我们对网页布局的传统认知，使开发者能够轻松构建复杂的栅格结构、自适应布局以及非线性设计。属性是CSS的一个新特性，用于指定一个元素的宽高比，确保元素在任何情况下都能保持预设的比例，无需依赖额外的HTML元素或JavaScript。属性用于定义一个剪切路径，允许对元素进行非矩形的形状裁剪。
css 文字竖排_CSS书写模式（Writing Mode）
weixin_39577908的博客
11-23 791
本文原载于24ways，作者为Jen Simmons，未经许可，禁止转载。鉴于你可能时间不多，我会先上“餐后甜品”，从结尾讲起。你可以用一个鲜为人知、然而很重要、很强大的CSS属性来使文本竖向排列，像这样：除了竖向排列文本，你还可以竖向排列图标、按钮和任何页面上的元素。我应用的 CSS 使浏览器重新思考这个世界的方向，让这个元素以与正常方向成 90 度的方向流动。查看下面的实时演示。选中标题，看看...
css盒模型与bfc与布局与垂直水平居中与css设计模式等
afk46847的博客
02-24 139
一、css盒子与布局相关 盒子内部的布局 盒子之间的布局visual formatting 脱离正常流normal flow的盒子的布局 absolute布局上下文下的布局 float布局上下文下的布局 flow下的盒子的布局 BFC布局上下文下的布局 IFC布局上下文下的布局 FFC布局上下文下的布局 table布局上下文下的布局 css grid布局上下文下的布局 1...
前端css/html+浏览器网络高频面试题【更新中】
hyx_1225的博客
08-24 120
面试题
Vue 知识点汇总（下）--附案例代码及项目地址
热门推荐
wuyxinu的博客
01-14 1万+
文章目录Vue预备知识与后续知识及项目案例一、简介1.Vue (读音 /vjuː/，类似于 view)的简单认识2.Vue.js安装二、Vue知识量化三、内容1、Webpack 详解什么是Webpack？前端模块化**和grunt/gulp的对比**webpack安装Webpack 起步Webpack配置css-loader的使用less文件处理图片文件处理ES6语法处理Webpack 配置 Vu...
现代CSS进化史
weixin_34335458的博客
02-07 159
英文：https://medium.com/actualize-...编译：缪斯 CSS一直被web开发者认为是最简单也是最难的一门奇葩语言。它的入门确实非常简单——你只需为元素定义好样式属性和值，看起来似乎需要做的工作也就这样嘛！然而在一些大型工程中CSS的组织是一件复杂和凌乱的事情，你更改页面上任意一个元素的一行CSS样式都有可能影...
CSS3 Flex 弹性布局实例代码详解
01-19
//任何一个容器都可以指定为Flex布局。 .box{ display: flex; } //行内元素也可以使用Flex布局。 .box{ display: inline-flex; } //注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将...
CSS3自适应浏览器页面框架布局代码
06-11
本资源“CSS3自适应浏览器页面框架布局代码”旨在帮助开发者创建适应各种屏幕尺寸和设备的网页，确保在不同浏览器上的一致显示效果。 首先，CSS3中的媒体查询（Media Queries）是实现自适应布局的关键。媒体查询...
移动端Web页面的CSS3 flex布局快速上手指南
12-13
在移动端Web页面设计中，CSS3的Flex布局（Flexible Box，简称flexbox）是一个强大的工具，它极大地简化了复杂的布局问题。本指南将带你快速掌握如何使用flexbox进行页面布局。 首先，要开启flex布局，你需要在父...
css3 flex布局实现平均分配元素的示例代码
11-20
在CSS3中，Flex布局（Flexible Box）是一种强大的布局模型，用于处理复杂的网页布局问题，尤其是在响应式设计中。它允许开发者更容易地控制容器内的子元素的排列、对齐和大小调整。本篇文章将深入探讨如何使用Flex...
【信号分解】基于蝗虫优化算法GOA-CEEMDAN实现信号去躁附matlab代码.rar
最新发布
07-19
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
【信号分解】基于北方苍鹰优化算法NGO-CEEMDAN实现信号去躁附matlab代码.rar
07-19
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
基于鱼鹰优化算法OOA-VMD实现信号去噪目标函数为包络信息熵 包络熵 排列熵 样本熵最小附matlab代码.rar
07-19
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
全国大学生电子设计竞赛（电赛）相关资源（流程、模板、心得、历届资料等）
07-19
近些年，电赛规则、限制不断修改，该放开的差不多都放开了。那么现在的电赛四旋翼相关的赛题，有想法完赛（不打酱油）的话，感觉至少具备以下能力。｛2023年的G题劝退了多少组去玩E题？ ｝ 熟练的单片机编程能力。如果连KEIL、VOFA+都没听说过的话，那拉倒吧，你退赛吧。 基本的自动控制素养。如果连反馈、滤波、PID控制、串级PID控制等都没听说过的话，那拉倒吧，你很难完赛。。 对四旋翼飞行器的飞控、控制系统非常熟悉。如果是自研的飞控，那是绝佳的。当然用Pixhawk、无名、ANO匿名等开源飞控也没问题，现在组委会也不管了。如果比赛时现去调飞控，或者以为飞行器上去给个指令就能飞，那拉倒吧，你对电赛有错误的认知。 对各种传感器的应用和编程都要熟练掌握，包括但不限于激光测距、光流、超声波测距、Intel T265深度定位镜头、气压高度计、陀螺仪/加速度计（MPU6050、BMI088...）、磁力计（AK8975...）等。如果认为传感器反馈都是现成的，没必要去学的话，那拉倒吧，你不适合大学生电赛。 对板载计算机（树莓派、英伟达NX、英特尔NUC...）、UBUNTU操作系统、ROS等要非常
"DIVCSS技术在WEB页面布局的实践报告
标题：用DIVCSS技术的WEB页面布局实践 摘要：本文综合报告了一项关于使用DIVCSS技术进行WEB页面布局的实践。实践的目的是了解WEB服务器的安装配置方法，熟悉使用Dreamweaver进行网页设计的一般方法和过程，掌握使用...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值