CSS---flex布局中子项常见属性

已于 2022-03-09 18:32:10 修改
阅读量222 收藏
点赞数 1
分类专栏： CSS 文章标签： css 前端 css3
于 2022-03-09 17:35:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/IDApprentice/article/details/123369197
版权

flex子项目占的份数

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

order属性定义子项的排列顺序 (前后顺序)

flex属性(最重要)

flex属性定义子项目分配剩余空间, 用flex来表示占多少份数

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

align-self 属性允许单个项目与其他项目不一样的对齐方式, 可覆盖 align-items属性 .

        默认值为 auto ,  表示继承父元素的 align-items 属性, 如果没有父元素, 则等同于 stretch

                

 order 属性定义项目的排列顺序

数值越小, 排列越靠前, 默认为 0

注意: 和 z-index 不一样

order: <number>   ;   默认值是0.  规定灵活项目的顺序

卓律涤
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Flex---flex布局属性详解
前端与计算机相关知识的分享，博主的qq523235674
02-06 7109
一、前言 布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。Flex 布局将成为未来布局的首选方案。 二、Flex概念 2.1 简介 Flex 是 Flexible Box 的缩写，意为"弹.
Flex布局所有属性总结大全
m0_64937973的博客
07-15 2554
flex弹性要点学习
超详细的flex的常用属性、属性值！！
weixin_52350720的博客
09-17 2819
9.17学习
css display:flex 属性
此去经年的博客
10-25 369
一：display:flex 布局 原文https://www.jianshu.com/p/d9373a86b748 一：display:flex 布局 display:flex 是一种布局方式。它即可以应用于容器中，也可以应用于行内元素。是W3C提出的一种新的方案，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。 Fle...
flex属性
webshady的博客
04-12 8535
一、定义 采用flex布局的元素，称为flex容器，里面的子元素为item。 二、语法 （1）块级元素： display：flex （2）行内元素： display:inline-flex 设为flex布局以后，flex item的float、clear、vertical-align属性将失效 三、flex容器的属性 容器属性 说明 flex-direction 决定主轴的方向（项目的排列方向） ..
微信小程序-FlexLayout布局.zip
04-13
Flex布局（ Flexible Box Layout）允许开发者定义容器中子元素的排列方式，包括水平或垂直方向的对齐、伸缩和换行。这极大地提高了在不同设备上创建一致用户体验的能力，尤其是在移动端，如微信小程序。 微信小程序...
flex布局实现上下固定中间滑动的布局方式
11-20
在现代网页设计中，使用Flex布局能够方便地实现各种复杂的界面布局，其中包括一种常见的需求：上下固定，中间可滑动的布局。这种布局适用于拥有头部、底部固定内容，中间区域需要根据内容多少滚动的场景。以下是如何...
新建文件夹_flex布局_
10-01
本教程将深入探讨Flex布局的概念、使用方法及其在HTML和CSS中的应用。通过学习，你将能够掌握如何利用Flexbox实现各种复杂的网页布局。 一、Flex布局的基本概念 1. 灵活性：Flex布局允许容器内的子元素自适应调整...
moz-flex-direction-autoprefixer-test
05-17
在CSS Flexbox布局模型中，`flex-direction`属性是非常关键的一部分，它决定了容器中flex项（flex items）的主轴方向，可以是行（row）、行逆序（row-reverse）、列（column）或者列逆序（column-reverse）。...
Food-Blog-Template --- Using-Flex-Box：食品博客模板-使用Flex Box
02-18
Flex Box，全称为“Flexible Box”，是一种用于定义容器中子元素布局的模型，尤其适合处理一维布局，如行或列。Flex Box模型允许我们更灵活地调整元素的大小、顺序和对齐方式，以适应不同的屏幕尺寸和设备。 二、...
flex属性全解
wushen的博客
04-08 517
 当 flex items 在 main axis 方向上超过了 flex container 的 size，flex-shrink 属性才会有效。◼ flex 是 flex-grow || flex-shrink || flex-basis 的简写,flex 属性可以指定1个，2个或3个值。◼ 如果所有 flex items 的 flex-shrink 总和超过 1，每个 flex item 收缩的 size为。flex-flow 属性是 flex-direction 和 flex-wrap 的简写。
Flex布局和主要属性用法详解
击水三千里的专栏
01-29 824
flex布局是继标准流布局、浮动布局、定位布局后的第四种布局方式。这种方式可以非常优雅的实现子元素居中或均匀分布，甚至可以随着窗口缩放自动适应。
flex布局常用属性
初郁
04-05 1826
原文：https://blog.csdn.net/u012620506/article/details/52369653 Flex布局父容器属性 flex-direction / flex-wrap/flex-flow/justify-content /align-items/align-content 1》水平（主轴上）对齐方式： justify-content：flex-start | flex-end | center | space-between | space-around...
flex的三个属性
土匪丁的博客
02-28 5055
flex:flex-grow flex-shrink flex-basis flex-grow:定义放大比例，默认为0，规定项目相对于其他灵活的项目进行扩展的量 flex-shrink:定义了项目的缩小比例，仅在宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值，默认为1 flex-basis:给上面两个属性分配多余空间之前, 计算项目是否有多余空间, 默认值为 auto, 即项目本身的大小 说起来听拗口也不怎么好理解，直接上代码吧！ 示例1： 子元素都设置为f.
Flex布局的三个属性要深刻理解！
发果叁
01-05 1855
整理了一套《前端大厂面试宝典》，包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法，一共201道面试题，并对每个问题作出了回答和解析。有需要的小伙伴，可以点击文末卡片领取这份文档，无偿分享部分文档展示：文章篇幅有限，后面的内容就不一一展示了有需要的小伙伴，可以点下方卡片免费领取) 我们会发现子元素left的宽度会变成200px，这就是flex-grow的作用了，flex-grow为0不做处理，而left盒子的flex-grow为1。
一文搞懂 flex 属性
Park_Geun_hye的博客
03-02 592
1. flex 属性简介 flex-grow：扩展子元素长度 flex-shrink：收缩子元素长度 flex-basic：设置子元素长度 flex-grow 和 flex-shrink 属性是基于父元素的长度进行计算的 flex-basic 实际上就是给子元素设定默认值，可以理解为直接他宽高设定默认值 建议概念比较模糊的同学先不要合起来使用 flex 属性，如 flex: 0 1 auto 因为...
CSS学习
rain_czy02的博客
06-11 2191
属性描述了元素的背景图像，实际开发常见于logo或者一些装饰性的小图片或者超大的背景图片，优点是非常便于控制位置（精灵图的一种运用常景）是一个相对单位，就是当前元素（font-size）1个字体的大小，如果当前元素没有设置大小，则会按照父元素的1个字体大小。rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。复合属性，有严格的顺序，不能随意更换顺序，不需要设置的属性可以省略（取默认值，但必须保留。
css之Flex弹性布局（子项常见属性）
最新发布
罗铠威的博客
10-22 414
【代表占父容器大小的份数】，假设有块大蛋糕，三个人吃,每人各占一份，就是每人吃蛋糕的1/3..item1{ //第一人flex:1.item2{ //第二人flex:1.item3{ //第三人flex:1那下面的这种情况，表示第一人 、第二人、第三人分别吃了蛋糕的1/6、2/6、3/6.item1{ //第一人flex:1.item2{ //第二人flex:2.item3{ //第三人flex:3【注意：我们分配是在剩余空间里面分配】
Flex布局常见子项属性
JHY97的博客
01-06 1992
1.flex属性 flex属性定义子项分配剩余的空间，用flex表示占据多数分数 1.1案例一 父项内两边子项固定宽度，中间子项宽度可自适应浏览器屏幕宽度变化 <body> <section> <div></div> <div></div> <div></div> </section> </body> <st
css flex-flow
07-27
引用\[1\]中提到，flex-flow属性是flex-direction属性和flex-wrap属性的简写形式。它用于定义flex容器中子项的排列方式。flex-flow属性的默认值是row nowrap，表示子项在主轴上水平排列，并且不换行。可以通过以下方式设置flex-flow属性的值：flex-flow: {flex-direction} {flex-wrap}; flex-flow: row nowrap; flex-flow: row wrap; flex-flow: row wrap-reverse; flex-flow: column nowrap; flex-flow: column wrap; flex-flow: column wrap-reverse; \[1\] 在引用\[2\]中的示例代码中，justify-content属性被用来定义子项在主轴上的对齐方式。可选的值有flex-start、flex-end、center、space-between和space-around。在这个例子中，justify-content属性被设置为flex-start，表示子项在主轴上靠左对齐。\[2\] 在引用\[3\]中提到，flex-direction属性决定了主轴的方向，从而决定了子元素在容器中的位置。它有四个可选值：row、row-reverse、column和column-reverse。在这个例子中，flex-direction属性被设置为column，表示主轴方向为垂直方向，子项在容器中从上到下排列。\[3\] 综上所述，css中的flex-flow属性用于设置flex容器中子项的排列方式，可以通过设置flex-direction属性和flex-wrap属性来实现。同时，可以使用justify-content属性来定义子项在主轴上的对齐方式，使用flex-direction属性来决定主轴的方向。 #### 引用[.reference_title] - *1* *2* *3* [响应式布局--flex学习](https://blog.csdn.net/qq_32845825/article/details/125486195)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值