flex 布局

已于 2023-01-07 22:05:20 修改
阅读量358 收藏
点赞数
文章标签： css css3 html
于 2022-11-19 16:54:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_66478060/article/details/127937391
版权

目录

一、flex布局原理

 二、flex 布局父项常见属性

1.flex-direction :设置主轴的方向

2.justify-content:设置主轴上的子元素排列方式

3.flex-wrap:设置子元素是否换行

4.align-content:设置侧轴上的子元素的排列方式（多行）

5.align-items:设置侧轴上子元素排列方式（单行）

 6.flex-flow

三、flex布局子项常见属性

一、flex布局原理

  1. flex是flexible box的缩写，意为“弹性布局”，用来为盒装模型提供最大的灵活性，任何一个容器都可以指定为flex布局。
  2. 当我们为父盒子设置flex布局以后，子元素的float、clear和vertical-align属性将失效
  3. 伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局
  4. 采用flex布局的元素，称为flex容器（flex container），简称“容器”。它的所有子元素自动成为容器成员，称为flex项目（flex item），简称“项目”。
  5. 总结flex布局原理：通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。

 二、flex 布局父项常见属性

1.flex-direction :设置主轴的方向

属性值说明
row默认值从左到右

row-reverse

从右到左

column

从上到下

column-reverse

从下到上

注意：子元素是跟着主轴来排列的。

2.justify-content:设置主轴上的子元素排列方式

注意：使用前需要确定好主轴的方向

属性值

说明

flex-start

默认值，从头部开始，如果x轴是主轴，则从左到右

flex-end

从尾部开始排列

center

在主轴居中对齐（如果主轴是x轴则水平居中）

space-around

平分剩余空间

space-between

先两边贴边，再平分剩余空间（重要）

<style>
.box{
    height: 200px; 
    width: 200px;
    border: 1px solid black;
    display: flex; 
    flex-direction:row;
    margin-top: 10px;
}
.smallBox1{
    height: 50px; 
    width: 50px; 
    background-color: aqua;
}
.smallBox2{
    height: 50px; 
    width: 50px; 
    background-color: aquamarine;
}
</style>
<body>
  <div class="box" style="justify-content: flex-start;">
    <div class="smallBox1"></div>
    <div class="smallBox2"></div>
  </div>

  <div class="box" style="justify-content: flex-end;">
    <div class="smallBox1"></div>
    <div class="smallBox2"></div>
  </div>

  <div class="box" style="justify-content: center;">
    <div class="smallBox1"></div>
    <div class="smallBox2"></div>
  </div>

  <div class="box" style="justify-content: space-around;">
    <div class="smallBox1"></div>
    <div class="smallBox2"></div>
  </div>

  <div class="box" style="justify-content: space-between;">
    <div class="smallBox1"></div>
    <div class="smallBox2"></div>
  </div>

</body>

效果如下：

3.flex-wrap:设置子元素是否换行

默认情况下，项目都排在一条线上。flex-wrap属性定义，flex布局中默认是不换行的。

属性值

说明

nowrap

默认值，不换行

wrap

换行

<style>
.box{
    height: 200px; 
    width: 200px;
    border: 1px solid black;
    display: flex; 
    flex-direction:row;
    margin-top: 10px;
}
.smallBox1{
    height: 50px; 
    width: 50px; 
    background-color: aqua;
}
.smallBox2{
    height: 50px; 
    width: 50px; 
    background-color: aquamarine;
}
</style>
<body>
  <div class="box" style="justify-content: flex-start;flex-wrap: nowrap;">
    <div class="smallBox1"></div>
    <div class="smallBox2"></div>
    <div class="smallBox1"></div>
    <div class="smallBox2"></div>
    <div class="smallBox1"></div>
    <div class="smallBox2"></div>
  </div>

  <div class="box" style="justify-content: flex-start;flex-wrap: wrap;">
    <div class="smallBox1"></div>
    <div class="smallBox2"></div>
    <div class="smallBox1"></div>
    <div class="smallBox2"></div>
    <div class="smallBox1"></div>
    <div class="smallBox2"></div>
  </div>
  

</body>

效果如下：

4.align-content:设置侧轴上的子元素的排列方式（多行）

注：设置子项在侧轴上的排列方式只能用于子项出现换行的情况（多行），在单行下是没有效果的。

属性值说明
flex-start默认值在侧轴的头部开始排列
flex-end在侧轴的尾部开始排列
center在侧轴的中间显示
space-around子项在侧轴平分剩余空间
space-between子项在侧轴先分布两头，再平分剩余空间
stretch设置子项元素高度平分父元素高度（子元素不设置高度）
<style>
.box{
    height: 148px; 
    width: 200px;
    border: 1px solid black;
    display: flex; 
    flex-direction:row;
    margin-top: 10px;
    flex-wrap: wrap;
}
.smallBox1{
    height: 50px; 
    width: 50px; 
    background-color: aqua;
}
.smallBox2{
    height: 50px; 
    width: 50px; 
    background-color: aquamarine;
}
</style>
<body>
  <div class="box" style="align-content: flex-start;">
    <div class="smallBox1"></div>
    <div class="smallBox2"></div>
    <div class="smallBox1"></div>
    <div class="smallBox2"></div>
    <div class="smallBox1"></div>
    <div class="smallBox2"></div>
  </div>

  <div class="box" style="align-content: flex-end;">
    <div class="smallBox1"></div>
    <div class="smallBox2"></div>
    <div class="smallBox1"></div>
    <div class="smallBox2"></div>
    <div class="smallBox1"></div>
    <div class="smallBox2"></div>
  </div>

  <div class="box" style="align-content: center;">
    <div class="smallBox1"></div>
    <div class="smallBox2"></div>
    <div class="smallBox1"></div>
    <div class="smallBox2"></div>
    <div class="smallBox1"></div>
    <div class="smallBox2"></div>
  </div>

  <div class="box" style="align-content: space-around;">
    <div class="smallBox1"></div>
    <div class="smallBox2"></div>
    <div class="smallBox1"></div>
    <div class="smallBox2"></div>
    <div class="smallBox1"></div>
    <div class="smallBox2"></div>
  </div>

  <div class="box" style="align-content: space-between;">
    <div class="smallBox1"></div>
    <div class="smallBox2"></div>
    <div class="smallBox1"></div>
    <div class="smallBox2"></div>
    <div class="smallBox1"></div>
    <div class="smallBox2"></div>
  </div>

  <div class="box" style="align-content: stretch;">
    <div style="background-color: aqua;width: 50px;"></div>
    <div style="background-color: aquamarine;width: 50px;"></div>
    <div style="background-color: aqua;width: 50px;"></div>
    <div style="background-color: aquamarine;width: 50px;"></div>
    <div style="background-color: aqua;width: 50px;"></div>
    <div style="background-color: aquamarine;width: 50px;"></div>
  </div>
</body>

效果如下：

5.align-items:设置侧轴上子元素排列方式（单行）

属性值说明
flex-start从上到下
flex-end从下到上
center垂直居中
strech拉伸，默认值  （子元素不设置高度）

<style>
.box{
    height: 148px; 
    width: 200px;
    border: 1px solid black;
    display: flex; 
    flex-direction:row;
    margin-top: 10px;
}
.smallBox1{
    height: 50px; 
    width: 50px; 
    background-color: aqua;
}
.smallBox2{
    height: 50px; 
    width: 50px; 
    background-color: aquamarine;
}
</style>
<body>
  <div class="box" style="align-items: flex-start;">
    <div class="smallBox1"></div>
    <div class="smallBox2"></div>
    <div class="smallBox1"></div>
  </div>

  <div class="box" style="align-items: flex-end;">
    <div class="smallBox1"></div>
    <div class="smallBox2"></div>
    <div class="smallBox1"></div>
  </div>

  <div class="box" style="align-items: center;">
    <div class="smallBox1"></div>
    <div class="smallBox2"></div>
    <div class="smallBox1"></div>
  </div>

  <div class="box" style="align-items: stretch;">
    <div style="width:50px;background-color: aqua;"></div>
    <div style="width:50px;background-color: aquamarine;"></div>
    <div style="width: 50px; background-color: aqua;"></div>
  </div>
  
</body>

效果如下：

 6.flex-flow

复合属性，相当于同时设置了flex-direction和flex-wrap。

三、flex布局子项常见属性

align-self控制子项自己在侧轴上的排列方式

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值是auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

咕噜噜噜噜噜噜噜噜噜噜噜噜噜噜噜
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
移动端H5 不同设备 px表现不一致
weixin_40577113的博客
11-19 728
<!DOCTYPE html> <html> <head> <style> html,body{ padding: 0; margin: 0; } </style> </head> <body> <div style="background: black;width: 375px;...
flex布局
白羊座的橙子
04-25 322
1、认识flex布局 flex布局是目前web开发中使用最多的布局方案： flex布局(又称为 Flexible布局，弹性布局) 目前在移动端使用的最多，在pc端也越来越普及 两个重要的概念 开启flex布局的元素叫做 flex container flex container里面的直接子元素叫做 flex items 设置元素的display属性为flex或者inline-flex可以称为flex container flex：flex-container为块级元素 inline-fl.
flexible.js原理解析
weixin_33738555的博客
04-30 5911
flexible原理解析 github仓库：github.com/amfe/lib-fl… 使用方法 安装 npm i -S amfe-flexible 复制代码<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=...
移动web学习--淘宝 flexible.js
季诗筱的博客
04-22 1万+
最近在学习移动web，需要做一个移动端和PC端都兼容的弹出框表单。查阅了很多资料，最终选择了使用淘宝的flexible.js来实现各个终端的适配。 很好的博文：     1、从网易与淘宝的font-size思考前端设计稿与工作流     2、白色橡树：移动web资源整理     3、移动端web app自适应布局探索与总结     4、手机端页面自适应解决方案—rem布局     5、使
移动端适配--meta标签玩的是什么
weixin_34355715的博客
05-19 981
基本一直都在做移动端的开发，rem布局也写了很久，不过对于实现的原理有些模棱两可的盲点，自己总结一下留着以后回顾。 本文分以下几个层面，主打用最最通俗的语言来阐述。 布局小例子 viewport作用 viewport和移动端适配的关系 flexible.js原理 vw vh flexible.js VS vw vh 布局小例子----常见困惑 iphone6尺寸是375*667，那给div设...
Flex布局
03-29
Flex布局 简介 Flex是Flexible Box的缩写，意为弹性布局。是W3C在2009年提出的一个新的布局方案。可以方便的实现各种页面布局。目前浏览器兼容如下：   (此图片来源于网络，如有侵权，请联系删除! )   Flex在...
Flex 布局教程
01-02
Flex 布局教程 Flex 布局教程 Flex 布局教程 Flex 布局教程 Flex 布局教程
flex布局实例DOM
01-15
Flex布局，全称为“Flexible Box”，也称作弹性盒布局，是CSS3中的一种布局模式，旨在提供一种更加高效、灵活的方式来对网页或应用程序中的容器内的子元素进行排列、对齐和分配空间。这种布局模式在响应式设计、...
flex布局分享.pptx
11-06
Flex布局是一种现代网页和应用程序设计中的布局模式，它允许开发者更灵活地控制元素在容器内的排列方式，解决了传统布局方式（如盒模型）在处理复杂布局时的诸多不便。Flex布局于2009年由W3C提出，现在已经得到了...
详解CSS3伸缩布局盒模型Flex布局
09-22
Flex布局，全称为Flexible Box布局，是CSS3中引入的一种全新的布局模式，旨在解决复杂的网页布局问题，特别是在处理响应式设计和动态内容时。Flex布局允许开发者更灵活地控制元素的大小、位置和顺序，即使元素尺寸...
flexible.js + makegrid.js 自适应布局
weixin_33895695的博客
11-17 508
一，flexible.js 的使用方式： （一），引用方式 1，引用cdn地址 &lt;script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.2/??flexible_css.js,flexible.js"&gt;&lt;/script&gt; 当前最新的版本是0.3.2。 2，下载flexible.js 等文件到项目指定目录下，然后在head中...
flex布局原理简介
丁哒哒的博客
12-05 4543
前言： 在面试过程中，我发现，flex布局经常被问道，但是其实我只是知道它都有些什么属性及怎么用，但是都没有真正去理解他是怎么实现的，被问到的时候就会觉得不专业，所以看了资料后，简要总结。 一、是什么？ Flex 是 Flexible Box 的缩写，意为"弹性布局"，是W3C 提出的一种新型布局方案，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。 顾名...
Programming Flex2 - 五.Flex框架的基本原理
hbb的专栏
09-16 2310
了解Flex程序的生命周期Flex程序从本质上讲，就是使用了（由AS编写的）Flex框架的Flash程序。但在Flex程序中可以忽略timeline这个概念，所有的内容都集于一帧。事实上Flex程序中的根，是继承flash.display.MovieClip的mx.managers.SystemManager。SystemManager有两帧。第一帧是预加载程序，第二帧是主程序。因此，所有程序在真
flexbox 弹性盒布局和布局原理
言川的博客
05-03 2万+
flexbox 弹性盒布局和布局原理 最近开始做H5，发现flexbox用的超级广泛，找到了这么一篇文章，https://css-tricks.com/snippets/css/a-guide-to-flexbox/,认为讲的还不错，加上自己的一些测试和理解，就有了这一篇笔记。 新版的flexbox规范分两部分：一部分是container，一部分是 items。 flexbox是一整
前端学习（926）：淘宝flexiblejs源码分析之核心原理
歌谣的博客
04-22 395
立即执行函数
教你如何用 lib-flexible 实现移动端H5页面适配
pwc1996的博客
07-22 4万+
前话好久没写教程了（可能会误导新手的菜鸟教程(￣▽￣)”）。最近入职公司做前端实习，这几个星期来学到了移动端H5页面适配。（以前根本没做过移动端网页/(ㄒoㄒ)/~~，还是微信端的）所以把我学到的一个小知识点写下来，也分享给前端新手们。正文0x00 大概说明做移动端网页和pc端很大不同的便是现在移动端窗口分辨率繁多。很多时候UI给的设计图只有一份，还是按照iphone6设计的，这就让前端适配其他例如
圣杯布局、双飞翼布局、Flex布局和绝对定位布局的几种经典布局的具体实现示例
热门推荐
wangchengiii的博客
09-10 4万+
题目要求：针对如下DOM结构，编写CSS，实现三栏水平布局，其中left、right分别位于左右两侧，left宽度为200px，right宽度为300px，main处在中间，宽度自适应。 要求：允许增加额外的DOM节点，但不能修改现有节点顺序。 <div class="container"> 　　<div class="main">main</div> 　　<div class="
Flex 弹性盒子布局使用教程
冰川的博客
01-02 1万+
传统的网页布局（layout）解决方案，是基于盒模型，依赖display+float+position属性，这对于那些特殊的布局非常的不方便，比如垂直居中就不易于实现。 2009年，W3C提出了一种新的方案----Flex布局，旨在提供一个更加有效的布局方式，更好的控制项目的对齐和自由分配容器空间，即使它们的大小是未知的或动态的。
主流布局 flex布局
最新发布
04-25
Flex布局（也称为弹性布局）是种主流的CSS布局方式，它可以方便地实现页面元素的自适应和排列。Flex布局通过定义容器和子元素的属性来实现灵活的布局效果。 在Flex布局中，有两个重要的概念：容器和子元素。容器是...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值