细说css3 flex布局之flex项目属性

最新推荐文章于 2024-08-02 20:34:24 发布

_寒影

最新推荐文章于 2024-08-02 20:34:24 发布

阅读量4.5k

点赞数

分类专栏：前端开发文章标签： flex css3 布局

本文链接：https://blog.csdn.net/QiuDW_01/article/details/47061099

版权

本文详细介绍了CSS3 flex布局中的项目属性，包括order、flex-grow、flex-shrink、flex-basis、flex和align-self。通过实例展示了这些属性如何控制flex项目在容器中的排列、放大、缩小和对齐方式，帮助开发者更好地理解和应用flex布局。

摘要由CSDN通过智能技术生成

在前篇博文中已经详细叙述了flex布局中的容器属性，那么现在就来谈谈flex项目属性那些事······
以下6个属性是作用在flex项目上的：

order
flex-grow
flex-shrink
flex-basis
flex
align-self

1.1 order属性
该属性定义项目的排列顺序，数值越小，排列越靠前，默认值为0。用法及效果如下：
html代码

<div class="flex-box">
    <div class="flex-item">item1</div>
    <div class="flex-item">item2</div>
    <div class="flex-item">item3</div>
</div>

css代码

.flex

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

_寒影

关注关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

Flex布局伸缩布局属性详解

Lay-Buddhist的博客

01-12

1158

CSS3在布局方面做了非常大的改进，Flex布局官方称为CSS Flexble Box布局模型使得我们对块级元素的布局排列变得非常的灵活，适应性非常强。其强大的伸缩性，可以提高元素在容器中的对齐、方向、顺序，甚至它们是动态的或者不确定大小的新布局模型。Flex容器的主要特征是能够调整其子元素在不同的屏幕大小中能够用最适合的方法填充合适的空间。在响应式开发中发挥极大的作用。本文主要讲解flex...

Flex布局常用的一些属性及解释

10-31

1138

记录一下忘记的时候翻一下父项常见属性 flex-direction：设置主轴的方向 justify-content：设置主轴上的子元素排列方式 flex-wrap：设置子元素是否换行 align-content：设置侧轴上的子元素的排列方式（多行） align-items：设置侧轴上的子元素排列方式（单行） flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap 下面一个一个进行说明 1.f

参与评论您还未登录，请先登录后发表或查看评论

前端的学习-CSS（弹性布局-flex）

最新发布

m0_68823256的博客

08-02

2308

CSS的定位-给父元素设置的属性

Flex 布局02

HDdgut的博客

09-05

116

1.order属性（父类定义的了flex，子类定义order属性） order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。如果数值相同，那么按原来html里面的排序方式排。也就是前面还在前面 .item { order: <integer>; } 2.flex-grow属性 flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。...

弹性计算

qq_37464878的博客

02-22

1731

W3C官网 https://www.w3.org/TR/2018/CR-css-flexbox-1-20181119/#flex-flex-grow-factor。在满足“收缩条件”时，flex容器中的项目会按照设置的flex-shrink和flex-basis乘积的比例来收缩，适应容器大小。在满足“延申条件”时，flex容器中的项目会按照设置的flex-grow值的比例来延申，占满容器剩余空间。描述flex-grow，flex-shrink，flex-basis。按照各自的规则取值即可。

CSS3之flex属性

杨筱斌的博客

12-22

431

flex属性特点：要在容器中定义flex属性需要在flex容器上使用display:flex属性在flex容器内部没有行内、行内块、块级元素的概念，所有元素皆可设置宽高在flex容器内部拥有主、侧轴（内容排列主方向，辅方向）主要应用于移动端页面或者不考虑兼容的PC端页面 flex容器属性： flex-direction: 作用： &n...

CSS的三大布局方式（流式布局，浮动布局和层布局）

originalApril的博客

03-16

6652

文章目录前言一、标准文档流二、三种布局方式1.流式布局2.浮动布局（1）字围效果（2）圣杯布局3.层布局定位的分类：（1）相对定位 position:relative（2）绝对定位 position:absolute（3）固定定位 position:fixed（4）静态定位就是不定位默认的三、浮动元素会造成影响：1.对父元素造成的影响解决方法2.对兄弟元素造成的影响解决方法四、浮动元素的特性前言布局：所谓的布局，就是指把一个盒子放在合适的位置。在CSS2.0中，有三大布局：（1..

vue3-admin商品管理后台项目(登录页开发和功能实现)

lovestar墨竹的博客

10-17

4309

vue3-admin商品管理后台项目（登录开发和功能实现）

css订单导航栏横线动画,小程序纯css 实现tab导航栏下划线跟随动画

weixin_29062671的博客

08-04

1209

很多时候在做tab导航的点击时我们都会要上一个过渡的动画，不然的话会显得生硬，用户没有达到比较佳的用户体验。如下图：在开发者工具中预览效果t3fyo-a07nj.gif我们可以用两种方法实现这样动画，css3的过渡或者用js去控制。省事的当然是用css3来写啦，我们先来看看css3的具体实现。css3实现：先看最基本的.wxml布局：image.png从图中可以看到，当前tap的line是用专门用...

整理大厂高频核心前端面试题，五万多字，面试必考

猫老板的豆

09-13

2482

如果 Vue 组件中的 data 是个对象，那么所有复用这个组件的地方，都在使用这个组件里面唯一的一个 data，所有使用组件的地方的 data 都会指向栈内这一个 data 的地址，那么会造成。等待执行栈和微任务队列都执行完毕才会执行，并且在执行完每一个宏任务之后，会去看看微任务队列有没有新添加的任务，如果有，会先将微任务队列中的任务清空，才会继续执行下一个宏任务。异步：是指不进入主线程，而进入任务队列的任务，只有任务队列通知主线程，某个异步任务可以执行了，该任务才会进入主线程。

CSS3 - flex属性

idomyway的博客

06-02

1507

前言 CSS属性 flex 规定了弹性元素如何伸长或缩短以适应flex容器中的可用空间。这是一个简写属性，用来设置 flex-grow flex-shrink flex-basis flex-grow 属性：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。 &n...

css3.flex项目属性

itSeven7的博客

02-22

493

flex-box项目属性 order || flex-grow || flex-shrink || flex-basis order（秩序）在不改变html结构的情况下进行项目排序，默认情况下是0，从低到高排序，数值越大越靠后。 li:nth-child(1){ order: 1; } li:nth-child(1){ order: 1; } li:nt

css3 flex 布局

weixin_30312659的博客

04-11

101

今天做一个小实战，需要让一个登录框始终保持水平和垂直居中，第一个想到的就是通过定位（要想让一个div居中，采用定位可以解决，示例），然后开始接触flex布局，学完感觉真的好用，现把知识点记录一下，以便自己日后查看（学习教程：阮大师的教程），笔记开始：传统的布局：围绕盒子模型（border、margin、padding、content）定位（position）、浮动（float）等。 ...

【CSS3】Flex布局详解

叶子与海的博客

10-05

3778

Flex是Flexible Box 的缩写，也称为弹性盒子布局。 Flex布局组成： - flex容器（`flex container`） - flex项（`flex items`） - 主轴（`main axis`） - 交叉轴（`cross axis`） - 自动弹性伸缩 - 更轻松地设计灵活的响应式布局结构 - 精确灵活控制块级盒子的布局方式 - 在pc端和移动端都适用

flex布局相关属性

weixin_47148261的博客

07-28

365

flex布局相关属性

Flex布局及属性详解

小洋人最happy的专栏

07-08

4181

文章目录一、前言二、Flex概念2.1 简介2.2 基本概念三、Flex-Container属性3.1 flex-direction3.2 justify-content3.3 align-items3.4 flex-wrap3.5 flex-flow3.6 align-content四、Flex-Item属性4.1 order4.2 align-self4.3 flex-grow4.4 flex-shrink4.5 flex-basis4.6 flex 一、前言布局的传统解决方案，基于盒状模型，依赖 d

Flex 布局——语法篇

ankang1124的博客

10-23

308

该篇主要记录flex主要语法，概念不再叙述任何一个容器都可以指定为 Flex 布局。 .box{ display: flex; } 行内元素也可以使用 Flex 布局。 .box{ display: inline-flex; } Webkit 内核的浏览器，必须加上-webkit前缀。 .box{ display: -web...

flex布局-所有属性整理

Jermyo的博客

12-18

904

/* flex布局：弹性盒布局，flex容器，子元素flex项目默认两根轴：水平轴和垂直交叉轴，项目默认沿主轴排列注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。 */ /* 一、容器的属性 flex-direction flex-wrap f......