css flex布局 —— 项目属性 flex

最新推荐文章于 2024-06-10 15:38:55 发布
最新推荐文章于 2024-06-10 15:38:55 发布
阅读量313 收藏
点赞数
分类专栏： # CSS 文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HH18700418030/article/details/126996574
版权
本文详细介绍了CSS中的flex属性，它是flex-grow, flex-shrink和flex-basis的简写，用于设置弹性盒元素的伸缩比例、收缩比例和初始大小。默认值为0 1 auto，提供auto和none两种快捷值。浏览器会根据此属性推算相关值。要注意，只有当元素作为弹性盒模型对象的子元素时，flex属性才生效。
摘要由CSDN通过智能技术生成

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

语法

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

注意：如果元素不是弹性盒模型对象的子元素，则 flex 属性不起作用。

＊且听风吟
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
面试题真题，Css 弹性布局（Flex，前端开发入门学习
04-06 306
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
CSS弹性布局
weixin_45203607的博客
04-30 8130
title: CSS弹性布局 abbrlink: 31146 date: 2020-07-22 13:09:38 author: 胡安民 toc: true top: false cover: false summary: categories: Web reprintPolicy: cc_by keywords: 弹性布局概念,flex-direction,flex-wrap, justify-content,align-items,align-content tags: CSS CSS-弹性布局.
Css 弹性布局（Flex）详细介绍（Flex 属性详解、场景分析）_css flex
最新发布
2401_85122951的博客
06-10 1711
此时宽度被压缩了，其实此时是按照比例缩小了，由之前的按照100份来占比，现在相当于按照1100份来占比（40% 40% 30%），此时的宽度就是1000 * (40/110) 大概就是363.64。在宽度总和超出父盒子的宽度时，希望保持每个子盒子的准确宽度，那就只能分行排列（一行排列会被按比例压缩，如上图）。现在，我们三个子盒子的宽度是固定的，因此实现不了自适应，我们可以使用 %（百分比）方式设置各个子盒子相对于父盒子所占的百分比。回到场景二，如果三个盒子的宽度占比总和大于100%，页面效果又是怎样的？
css中flex属性的介绍
雨名无的博客
11-30 550
flex属性 注意： 如果元素不是弹性盒模型对象的子元素，则 flex 属性不起作用。 当前元素的父元素的样式为 ​ dispaly:flex flex 语法： flex: 0 0 auto; 含义：不扩展 不收缩 默认长度为内容长度; flex: flex-grow flex-shrink flex-basis。 属性值 值 描述 flex-grow 一个数字，规定项目将相对于其他灵活的项目进行扩展的量。 flex-shrink 一个数字，规定项目将相对于其他灵活
CSS flex属性
ab_dk的博客
03-04 1131
flex弹性盒模型，让所有弹性盒模型对象的子元素都有相同的长度，且忽略它们内部的内容，可以做到水平布局。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style> #main { ...
css3 flex 属性1
hugejihu9的专栏
01-13 449
文章来自：源码在线https://www.shengli.me/css/570.html     实现效果：             效果图：        
详解CSS3伸缩布局盒模型Flex布局
12-09
CSS3引入的布局模式Flex布局，主要思想是让容器有能力让其子项目能够改变其 宽度 、 高度 、 顺序 ，以最佳的方式填充可用空间。Flex容器会使子项目(伸缩项目)扩展来填满可用空间，或缩小它们以防止溢出容器。 任何...
flex布局项目——携程在线首页（原生轮播图效果）.zip
04-16
携程在线首页。适合零基础入门的人使用的demo，对布局这块有不错的...采用的是flex布局使用了原生js实现的tab栏切换等。自己可以通过swiper插件或者TouchSlide插件以及bootstrap框架来替换！可以把这个demo进行更改。
css经典布局——头尾固定高度中间高度自适应布局
03-04
相信做过后台管理界面的同学，都非常清楚这个布局。最直观的方式是框架这个我不想多写费话，因为我们的重心不在这里。如果有不了解的同学可以百度、google。这里我不得不吐下槽！！百度实在让我这个“粉丝”失望。就...
css极速入门 —— grid布局
05-01
相比Flex布局，Grid布局更为灵活和强大，但学习成本相对困难一些。 基本概念： 1. 容器（container）：有容器属性的元素。 2. 项目（item）：有项目属性的元素。 3. 间距（gap）：容器中项目之间的距离。 4. 行...
详解flex布局的元素如何分配容器的剩余空间
01-19
不得不感慨在 flex 之前 CSS 的布局功能之弱：基本只能使用一些并非为布局而设计的属性来实现想要的布局——float、inline-block、position、甚至是 table 等。而使用这些属性来实现各种布局效果，往往又会遇到相当...
css flex所有属性总结
PrimaryColor
05-18 1413
flex弹性盒子布局所有属性：出现的顺序也就是使用比例，越靠前出现频率越高。 ##########容器属性：########## 一、定义弹性盒子。 display:flex; 可取值： flex（弹性盒子）。 inline-flex(行内元素flex)。 -webkit-flex（webkit内核浏览器的flex）。 二、设置主轴方向（也可以说是元素的排列方向）。 flex-direction:row; 可取值： row(默认值)（横向排列）：主轴为水平方向，起点从左边。简单的说：水平的排列方式，从左到
【前端开发】CSS：flex属性
`雾博客
09-07 262
align-content：设置侧轴上的子元素的排列方式（多行）；align-self：控制子项在侧轴上的排列方式，允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性，默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap；flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。
Css 弹性布局（Flex）详细介绍（Flex 属性详解、场景分析）
热门推荐
高大志leo的博客
12-11 4万+
前言 我们知道，网页展示就好比一个个盒子堆叠在一起，通过调整盒子的大小、位置、样式等，形成了各式各样的页面。当我们在开发一个页面的时候，我们常规的做法可能是：搭建框架、划分区域、定制排版、调整位置、嵌入内容、微调与增添样式。 今天所介绍的是基础且关键的一环--布局排版。其中，展开布局中常用的技术：Flex布局。 Flex布局是什么？ Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。 .box {
CSS flex属性深入理解
az44yao的专栏
10-01 1092
CSS flex属性属性还是很难理解的，但是flex布局要想玩得溜溜溜，这一关必须得过，来来来，一起看看究竟是什么意思，如何更容易理解与记忆。 一、flex属性是一种简写 首先flex属性是flex-grow，flex-shrink和flex-basis的缩写。 等下，已经晕了！ flex-grow是谁？flex-shrink是哪位？flex-basis又是何人？ 稍安稍安，这3个CSS属性我们后面会详细展开，这里就先三言两句稍微提一下他们的作用。 这flex布局就好像是有钱人家分家产。 故事
Css flex属性
benben0729的专栏
09-28 942
flex布局 注意：设为flex布局之后，子元素的float,clear和vertical-align属性将会失效 基本概念 名称 描述 flex container 容器（采用flex布局的元素，举例div1） flex item 容器内的成员（项目，举例div1下的标签） main axis 水平轴 cross axis 垂直交叉轴（纵轴） ...
CSS flex 属性
shengyin714959的博客
09-11 91
flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。如果元素不是弹性盒模型对象的子元素，则 flex 属性不起作用。默认值：0 1 auto继承：否可动画化：是，参见个别的属性。请参阅可动画化（animatable）。版本：CSS3object尝试一下。
CSS弹性布局flex属性整理
ct5211314的博客
03-09 2487
属性学习
flex布局——最后一行左对齐的实现方式
05-12
要实现最后一行左对齐的效果，可以使用 Flex 布局中的 `justify-content` 和 `flex-wrap` 属性。 首先，将容器设置为 Flex 布局： ```css .container { display: flex; flex-wrap: wrap; } ``` 接着，设置 `justify-content` 属性为 `space-between`，这样每一行中的元素会均匀分布在整个行中： ```css .container { display: flex; flex-wrap: wrap; justify-content: space-between; } ``` 但是这样会导致最后一行的元素也会均匀分布，无法实现左对齐的效果。为了解决这个问题，需要在最后一行中的元素上添加一个 `margin-right: auto;` 的样式，将其向右对齐。 如下所示： ```css .container { display: flex; flex-wrap: wrap; justify-content: space-between; } .container:last-child > *:nth-last-child(-n+2) { margin-right: auto; } ``` 这里使用了 CSS 选择器的 `:last-child` 和 `:nth-last-child`，选择最后一行中的倒数两个元素，然后将它们的 `margin-right` 属性设置为 `auto`，达到左对齐的效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值