CSS学习之flex 弹性布局

已于 2024-01-21 12:59:33 修改
阅读量387 收藏 7
点赞数 8
文章标签： css 学习 前端
于 2024-01-21 10:53:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43935402/article/details/135726168
版权

引用于B站UP主 “哆啦niko” 的CSS科普教程

flex的轴向

  1. 主轴为mian axis，交叉轴为cross axis。在这里插入图片描述
  2. 左上角是起点
    在这里插入图片描述

flex的 6个容器属性

一、flex-direction 定义主轴方向

  1. row(默认水平）
  2. column(垂直）
  3. row-reverser(水平反向）
  4. column-reverse(垂直反向）

二、justify-content

  1. flex-start (默认主轴对齐)
    在这里插入图片描述

  2. flex-end （后对齐）
    在这里插入图片描述

  3. center （居中）
    在这里插入图片描述

  4. space-between （等距 首尾）
    在这里插入图片描述

  5. space-around （等距 两边）
    在这里插入图片描述

  6. space- evenly （等距 容器）
    在这里插入图片描述

三、align-items 定义子元素在交叉轴的前、后、居中的对齐方式

  1. flex-start
    在这里插入图片描述

  2. flex-end
    在这里插入图片描述

  3. center
    在这里插入图片描述

  4. baseline （文字基线）
    在这里插入图片描述

  5. stretch （拉伸）
    在这里插入图片描述

四、flex-wrap

默认为不换行

wrap （换行）

在这里插入图片描述

五、align-content

包括以下几种
在这里插入图片描述

六、项目属性

  1. order 根据其数值定义元素的排序。
    在这里插入图片描述
  2. align-self 允许项目自身有单独的交叉轴对齐方式
    可以设置自己的align-item，默认值auto继承容器属性。
    在这里插入图片描述
  3. flex 为三个属性的简写
    在这里插入图片描述
  1. flex-grow
    按容器剩余空间的比例方式元素填充容器。
    在这里插入图片描述
  2. flex-shrink
    按被挤压空间的比例缩小元素。
    在这里插入图片描述
  3. flex-basis
    元素初始大小，默认auto，根据主轴长度分配,在这里插入图片描述

在这里插入图片描述
简写和分开设置效果会不一致，建议简写，浏览器会自动计算相关数值。
在这里插入图片描述

Big Z
关注
  • 8
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
display:flex; 布局
weixin_34252686的博客
07-26 221
给父元素添加 display:flex; display:-webkit-flex; flex-direction: row | row-reverse | column | column-reverse; 属性决定主轴的方向（即项目的排列方向） row（默认值）：主轴为水平方向，起点在左端。 row-reverse：主轴为水平方向，起点在...
CSS3之Flex弹性布局
m0_46324704的博客
07-21 1004
CSS3之Flex弹性布局的基本使用方法
css样式之flex弹性盒布局
m0_72642533的博客
02-27 798
要使用flex布局，任何一个容器都可以指定成为Flex布局，但是在设为Flex布局后,其子元素的float(浮动)、clear(规定元素哪一侧不允许浮动)和vertical-align(元素垂直对齐方式)属性将失效。5个值：flex-start、flex-end、center、space-around、space-between
CSS FLEX 弹性布局详解
qq_53569667的博客
11-29 802
关于 CSS flex 布局的知识点，可作手册参考。
css 弹性布局 flex 详解
2301_76669854的博客
11-28 1352
默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的。align-self属性允许单个项目有与其他项目不一样的对齐方式，（4）justify-content 项目在主轴上的对齐方式。（默认,不换行 / wrap（换行,第一行在上方）/（和父元素的align-self值一致）/（默认，主轴为水平方向，起点在左）/（项目的第一行文字的基线对齐）/
CSS3 flex弹性布局
xiangxiongfly
07-21 1558
CSS3新增了一种新型的弹性盒子模型。通过弹性盒子模型，我们可以轻松地创建自适应浏览器窗口的“流动布局”以及自适应字体大小的弹性布局，使得响应式布局的实现更加容易。 此外记住一点：在使用弹性盒子模型之前，你必须为父元素定义display:flex;或display:inline-flex;，这样父元素才具有弹性盒子模型的特点。
CSS3 の flex弹性布局
2301_80293400的博客
06-01 1238
css3的弹性布局
CSS - 弹性布局（flex）
伏城之外的博客
07-20 2361
传统布局的不足、弹性布局、display:flex、flex-direction、主轴、侧轴、justify-content、align-items、一维布局、flex项目元素的特点、弹性宽高、flex-wrap、align-content与align-items的区别、flex-flow、flex-grow按比扩容、flex-shrink按权重比收缩、flex-basis、flex复合写法、order、align-self............
CSS系列之flex布局
老__L的博客
03-28 1041
本文主要CSS的align-content、align-items、align-self、flex、flex-basis、flex-direction、flex-flow、flex-grow、flex-shrink、flex-wrap、justify-content、order属性。flex布局
css高度自适应-flex弹性布局
qq_57218855的博客
05-10 1199
css高度自适应
CSS3 Flex 弹性布局实例代码详解
01-19
//任何一个容器都可以指定为Flex布局。 .box{ display: flex; } //行内元素也可以使用Flex布局。 .box{ display: inline-flex; } //注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将...
css flex 弹性布局详解
12-30
案例基础布局 html <li class=item></li> <li class=item></li> <li class=item></li> <li class=item></li> css .box{ display: -webkit-flex; display: flex; } .item{ width: 200px;
几个CSS3的flex弹性盒模型布局的简单例子演示
09-24
主要介绍了几个CSS3的flex弹性盒模型布局的简单例子演示,flex布局是迄今为止最强大的web布局方式,需要的朋友可以参考下
CSS实现经典打字小游戏《生死时速》
坚信万物皆可切的切图仔
06-11 1117
游戏开始后，警察在3秒后开始出动，如果警察抓到小偷（位置重合）即游戏失败。你需要根据页面底部的对话正确输入单词，即可让小偷不断运动，拉开与警察的距离，如果在输入全部对话前没有被警察逮到，即闯关成功。整个游戏其实实现起来很简单，只需要在设置offset路径动画的基础上加一点点细节就完成了。学如逆水行舟，不进则退～
如何用css实现两列布局?
weixin_45596561的博客
06-11 884
2.通过给两列都设置float:left属性和宽度就可以实现两列布局，还要设置伪元素清除浮动；通过给容器设置flex布局，然后每一列设置flex:1，就可以实现两列等宽；实现两列布局有多种方法，这里我会介绍几种常见的技术，包括浮动、Flexbox和Grid布局。无论使用哪种布局方式，都要考虑响应式设计，以确保布局在各种设备上都能良好展示。Grid布局是CSS中最强大的布局系统之一，尤其适合复杂的网格布局。就可以实现等宽两列布局，这种是只在容器设置即可。4. 多总结即可，容易忘。
Html_Css问答集(3)
最新发布
白话魔法师
06-14 654
html与css学习中的一些疑问，问答中轻松获取知识。
Tailwind CSS 实战指南：快速构建响应式网页设计
06-12 1009
Tailwind CSS 是由Adam Wathan和Steve Schoger在2017年创建的。它最初是为了解决传统CSS框架在定制性和灵活性方面的局限性。Tailwind CSS的设计理念是提供一个高度可定制的工具集，允许开发者以实用为先的原则构建用户界面，而不是依赖于预定义的组件。
HTML5+CSS3+JS小实例：网格图库
艾恩小灰灰的博客
06-05 1590
实例：网格图库。技术栈：HTML+CSS+JS。
Html_Css问答集(2)
白话魔法师
06-14 781
html与css学习中的一些疑问，问答中轻松获取知识。
CSS教程:flex弹性布局
05-30
Flexbox（弹性布局）是CSS3中引入的一种新的布局方式，它可以让我们更加方便地创建灵活的布局。使用Flexbox，可以轻松地实现复杂的布局，比如垂直居中、等高布局等。 Flexbox的核心思想是让容器内的子元素能够动态地伸缩，以适应不同尺寸的屏幕和设备。在Flexbox中，容器被称为“Flex容器”，而子元素被称为“Flex项目”。 以下是Flexbox常用的属性： 1. display: flex; 将容器设置为弹性布局 2. flex-direction: row/column; 定义主轴方向 3. justify-content: flex-start/center/flex-end/space-between/space-around; 定义主轴上的对齐方式 4. align-items: flex-start/center/flex-end/baseline/stretch; 定义交叉轴上的对齐方式 5. flex-wrap: nowrap/wrap/wrap-reverse; 定义是否换行 6. flex-grow: number; 定义项目的放大比例 7. flex-shrink: number; 定义项目的缩小比例 8. flex-basis: length; 定义项目的基准大小 以上是Flexbox常用的属性，学习完这些属性后，你可以开始使用Flexbox来创建弹性布局了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值