CSS布局之flex

最新推荐文章于 2024-07-09 15:59:19 发布
最新推荐文章于 2024-07-09 15:59:19 发布
阅读量152 收藏
点赞数 1
分类专栏： CSS 文章标签： css css3 flex
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yuan_me_da/article/details/104725288
版权

flex的兼容性

  • iOS7.0 开始支持最新
  • Android4.4 开始兼容
  • IE10+ 兼容

flex如何实现布局

个人总结：

flex布局涉及到12个css属性，主要涉及到容器和轴的概念，父容器和子容器，主轴以及交叉轴

典型应用(水平垂直居中)：

    .parent{
        display: flex;
        justify-content: center;
        align-content: center;
    }
  • 父容器
  1. 【flex-direction】—— row | column | row-reverse | column-reverse

在这里插入图片描述

  1. 【flex-wrap】—— wrap | nowrap | wrap-reverse

在这里插入图片描述

  1. 【flex-flow】—— flex-direction flex-wrap组合

  2. 【justify-content】—— flex-start | flex-end | center | space-round | space-between

在这里插入图片描述

  1. 【algin-items】—— flex-start | flex-end | center | baseline | stretch

在这里插入图片描述

  1. 【algin-content】—— flex-start | flex-end | center | space-round | space-between | stretch

在这里插入图片描述
在这里插入图片描述

  • 子容器
  1. 【flex】

在这里插入图片描述

  1. 【align-self】—— flex-start | flex-end | center | stretch | baseline

在这里插入图片描述

  1. 【order】—— 数字

在这里插入图片描述

  1. 【algin-items】—— 同父元素,设置后会覆盖父元素
  2. 【justify-content】—— 同父元素,设置后会覆盖父元素
  3. 【flex-grow】—— 设置剩余空间的伸展比例 以及 【flex-shrink】—— 设置超出空间的缩小比例

在这里插入图片描述

lxcy_intellect
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css中关于mso的所有属性（AI生成准确性未校验）
mengmeng12138的博客
07-27 1576
MSO（Microsoft Office）指的是微软的办公软件，如Word、Excel、PowerPoint等，而在CSS中，MSO提供了一些属性来控制这些软件在呈现带有样式的HTML页面时的效果。需要注意的是，mso属性只在Microsoft Office软件中才有效，而在网页中绝大部分浏览器是不支持mso属性的，如果想要在网页中使用这些属性，建议使用其他的CSS属性代替。在CSS样式中，mso代表“Microsoft Office”，这些属性主要是为了在Microsoft Office中使用而定义的。
你必须知道的flex伸缩布局
lmy233的博客
10-16 1308
伸缩布局： display:flex;让大盒子成为容器，容器有主轴和侧轴； 子盒子是容器的项目，项目默认会从主轴的起点沿主轴的方向依次排列，如果超过容器，则会自动收缩，不换行 所以一定要注意当前主轴的起点在什么地方 容器的6个属性：写在容器的css里 —1--- flex-direction控制主轴的方向： row→：默认值，主轴呈现水平方向从左往右 column↓：主轴呈现垂直方向从上往下，项目会垂直排列，侧轴会变成水平方向从右往左 row-reverse← 主轴呈现水平方向从右往左，项目的排列也会反过来
flex弹性盒子
weixin_43465508的博客
03-28 409
弹性盒子是一种用于按行或者按列布局的一维布局方法，元素可以膨胀以填充额外的空间，缩小以适应更小的空间。
(flex布局)justify-content：space-around和space-between的区别
热门推荐
qq_41619567的博客
11-09 2万+
space-between space-around
css3中background-repeat的 space和round属性
gabby____的博客
11-03 6597
background-repeat space/round属性 2018-06-01 admin 1.容器空间小于图片 div { width: 200px; height: 200px; border: solid 1px red; background-color: #fff3d4; background-size: 300px; bac...
CSS的flex布局.ppt
06-12
网页布局（layout）是CSS的一个重点应用。布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C提出了一...
CSS3 flex布局之快速实现BorderLayout布局
12-13
【CSS3 Flex布局】是一种强大的网页布局解决方案，它允许开发者轻松地创建响应式和动态的用户界面。在Flex布局模式中，元素可以在容器内灵活调整大小和位置，以适应不同的屏幕尺寸和方向。相较于传统的布局方式，如...
详解CSS中的flex布局
01-19
flex布局又称为弹性布局，任何一个容器都可以指定为flex布局 声明弹性盒子的几种方式 就像前面说的，所有容器都可以指定为flex布局 .box{ display:flex;} 行内元素也可以使用： display:inline-flex; 改变弹性...
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;
flex 布局容器的属性记录
岚风尘雨吾独醉、
08-15 285
flex布局有两种方式，行内和块级 块级：disaply：flex 行内：disaply：inline-flex 如果父元素设置了 flex属性，那么子元素的float、clear、vertical-align的属性都将失效 有六种属性可以配合flex布局使用 1.flex-direction 2.flex-wrap 3.flex-flow 4.justify-content 5.align-items 6.align-content 第一：flex-direction 决定了主轴的方向 flex-dire
[css] 举例说明background-repeat的新属性值：round和space的作用是什么？
歌谣的博客
01-18 890
[css] 第 举例说明background-repeat的新属性值：round和space的作用是什么？ space 背景图不会产生缩放，会被裁切 round 缩放背景图至容器大小（非等比例缩放） 个人简介 我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易， 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题 ...
flex布局设置space-between(around)最后一行不左对齐问题
qq_44716411的博客
09-10 2703
flex布局设置space-between(around)最后一行不左对齐问题 需求在项目布局上使用弹性布局，要求每个盒子两端要对齐，而且最后一行在列不满的情况下要求左对齐； 问题： 使用flex的设置justify-content为space-between;发现最后一行不能左对齐，而是两端对齐方式导致形成下图， 方法： 一、添加几个空格子，格子高度为0 <!DOCTYPE html> <html lang="en"> <head> <meta charset
彻底理解CSS3弹性盒模型flex 用法
weixin_41010310的博客
06-19 968
flex-direction: row | row-reverse | column | column-reverse /* 规定子元素排列方向 * row：横向从左到右排序 * row-reverse：横向从右到左排序 * column：纵向从上到下排序 * column-reverse：纵向从下到上排序 */
处理flex弹性，space-between，space-around 的最后一行
知无涯
02-04 3627
先看效果图 最后一行补位，补充多个元素， height: 1px;， visibility: hidden 使用了最小宽度来保证每个元素在缩放时，能够以最小宽度正常显示。也有一个固定宽度为了避免数据少时，独占一行,显示难看。 解决上下行元素 多出的间隔 使用align-content: baseline; 核心代码 .item.h1 { height: 1px; visibility: hidden } <!DOCTYPE html> <html>
CSS子块元素在父块元素水平垂直居中的几种方式
嘘...一只bug
03-06 1006
子元素在父元素中垂直水平居中的几种方式
Flex处理浮点数四舍五入问题
IT深耕十余载，大道之简
05-22 1343
flex处理浮点数的四舍五入有两种，一种是整数的四舍五入（Math.round(v:Number)），一种是小数的四舍五入(Number.toFixed(i:unit))。 问题：使用flex的toFixed()函数保留小数时你会发现经常有一些情况下是不能完成四舍五入的，例如你要保留小数点后两位数字，小数点后的第一位如果是2，第二位是9，第三位大于等于5，这是就会出现下面这种情况： v
Flex RoundCorner
flysnail2007的专栏
09-12 111
看多了很多关于设置VBox圆角的资料,研究了一天 ,终有所获,先发上来和大家分享一下. [code="java"] [/code]
CSS【详解】层叠 z-index （含 z-index 的层叠规则，不同样式的层叠效果）
最新发布
朝阳39的博客
07-09 603
仅对已定位的元素（）有效，默认值为0，可以为负值。
css flex弹性布局display flex
11-24
其中，`display: flex` 是将一个容器指定为 Flex 布局的方式之一。 下面是一个简单的例子，展示如何使用 `display: flex` 将一个容器指定为 Flex 布局： ```html <div class="item">Item 1 <div class="item">...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值