flex布局各属性介绍

最新推荐文章于 2024-09-05 10:31:00 发布
最新推荐文章于 2024-09-05 10:31:00 发布
阅读量490 收藏
点赞数
分类专栏： css 文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Allurewuhui/article/details/124136245
版权
本文介绍了Flex布局的基本概念，通过设置父元素的display:flex，可以方便地控制子元素的位置和排列方式。主要讨论了flex-direction、justify-content、flex-wrap、align-items和align-content等关键属性的作用，以及子元素的flex属性，包括flex-basis、flex-grow和flex-shrink的用法，帮助理解如何在不同场景下灵活调整元素布局。
摘要由CSDN通过智能技术生成
  • 在指定父元素中，子元素平分父元素空间
    • 子元素不需要设置宽度（因为要平分父元素宽度），给父元素设置 display:flex 后，给子元素设置 flex:1；即可
  • 一句话总结flex布局
    • 通过给父元素添加flex属性，控制子元素的位置和排列方式

  • 父元素常见属性——flex-direction

    • 元素跟着主轴方向排列
    • 设置完主轴方向之后，侧轴对应生成

  • 父元素常用属性——justify-content

  • 父元素常用属性——flex-wrap

    • 在flex布局中，默认子元素是不换行的，如果装不开，会自动缩小元素的宽度，挤在父元素里面
    <
最低0.47元/天 解锁文章
小白-先森
关注
专栏目录
【微信小程序】今日天气
DUMG
01-06 867
今日天气小程序：手动搜索位置获取天气信息
flex布局常用属性
weixin_53657413的博客
12-25 8482
flex布局父项常见属性 flex-direction: 设置主轴的方向 justify-content: 设置主轴上的子元素排列方式 flex-wrap: 设置子元素是否换行 align-content: 设置侧轴的子元素的排列方式（多行） align-items:设置侧轴上的子元素排列方式（单行） flex-flow:复合属性，相当于同时设置了flex-direction 和 flex-wrap flex-direction：设置主轴的方向 1）主轴与侧轴 在flex布局中,是分为主
css弹性盒子——flex布局
bengbeng2345的博客
09-05 1119
flex和上面的block，inline，inline-block并列， display只能设置一个属性，display和float不能出现在同一个盒子的属性里。等于 flex-flow: row wrap;默认子盒子宽高度超过父盒子时，按父盒子宽高度均分，再多则会溢出。设置主轴初始尺寸，0%(不起作用)，n px。单个盒子范围0~1 延伸至剩余空间的0~1。多个子盒子设置超过1时，剩余空间分成n份。
flex全部的布局属性
Heartnottowake的博客
03-11 544
弹性盒布局最突出的特点，能让元素对不同的屏幕尺寸和不同的显示设备做好适应的准备，内容可以根据可用空间的大小增减尺寸。 弹性盒依赖父子关系，在元素声明display：flex或者inline-flex就可以激活，这个元素也就称为（flex container），子元素就称为（flex item） div#one{display: flex;} div#two{display: inline-flex;} div{ background: #ccc;
flex布局-所有属性整理
weixin_40719714的博客
06-29 886
/* flex布局： 弹性盒布局，flex容器，子元素flex项目 默认两根轴：水平轴和垂直交叉轴，项目默认沿主轴排列 注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。 */ /* 一、容器的属性 flex-direction flex-wrap flex-flow justify-content align-items ...
Flex布局常见属性图解
嘉禾嘉宁papa
03-01 4352
Flex属性详解
Flex布局
03-29
通过这些属性的组合运用，开发者可以轻松创建出响应式和适应性强的页面布局，无论是在桌面端还是移动端，Flex布局都大大简化了布局设计的工作。不过要注意，对于Webkit内核的早期浏览器，可能需要添加`-webkit-`前缀...
CSS Flex布局详解及其重要属性应用
最新发布
10-09
详述了flex布局下父级flex container及子元素flex item的相关属性，具体介绍了flex-direction、flex-wrap等关键属性，并详细阐述justify-content、align-items等排列与对齐的方式及其对页面的影响。 适合人群：前端...
flex布局及常见属性
qq_45033897的博客
07-20 1611
flex布局中常见属性
flex布局 父元素属性之 justify-content 主轴上子元素的排列方式
01-07
父元素属性之 justify-content  justify-content：设置主轴上子元素的排列方式 justify-content 的属性值如下： 属性值 含义 flex-start 从主轴的头部开始排，主轴：x轴 左对齐；y轴 顶部对齐（默 认值） ...
flex布局的常见属性
qq_42919799的博客
11-15 621
flex布局的常见属性 主轴与侧轴 flex布局中，是分为主轴和侧轴两个方向，同样的叫法有：行和列、x轴y轴 默认主轴的方向就是x轴方向，水平向右 默认侧轴的方向就是y轴方向，水平向下 单行情况使用align-items，多行情况下使用align-content 常见的父项属性 flex-direction:设置主轴的排列方向 子元素事是跟着主轴来排列的 row:默认值从左向右 row-reverse:从右向左 column:从上到下 column-reverse:从下到上 justify-
flex 布局常用属性
404源码社区 - Admin404
01-15 867
1. flex 布局介绍 flex 是 Flexible Box 的缩写, 意为弹性布局。用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 Flex 布局 flex 布局原理: 通过给父元素添加 flex 属性，来控制子盒子的位置和排列方式 2. flex-direction - 设置主轴的方向 在 flex 布局中，分为主轴和侧轴两个方向，也称为 x 轴 和 y 轴 默认主轴方向就是 x 轴方向，水平向右；默认侧轴方向就是 y 轴方向，垂直向下 flex-direction 属性就是用
flex布局的属性
crazybubble的博客
02-02 437
flex属性 flex的核心概念是轴和容器，容器包括外层的父容器和内层的子容器，轴包括主轴（默认水平）和交叉轴（默认垂直）。 一、开启flex布局 父容器设置属性值： display: flex; 若父容器为行内元素： display: inline-flex; Webkit内核的浏览器： display: -webkit-flex; 二、父容器可以统一设置子容器的排列方式，子容器也可以单独设置自身的排列方式，如果两者同时设置，以子容器的设置为准。 1.父容器的属性： (1)设置主轴的方向：flex-
Flex布局——属性
小花魁的博客
11-30 417
Flex布局——属性标签（空格分隔）： flex布局简介 现在网页布局比较流行的是div布局，但是深有体会的是例如垂直居中就不是很容易实现，虽然网上给了好多方案，但都稍麻烦；相对来说，Flex布局就可以用简简单单几个属性就能完成各种各样的布局 有人可能会担心浏览器的支持 浏览器 支持的版本 IE 10+ FireFox 22+ Chrome 21+ Opera
flex布局属性
weixin_34260991的博客
04-19 90
许久未碰前端，今日发现把居然flex布局属性忘得差不多了，复习一下。 flex布局就是将flex item放置在flex container中，通过在container或item上添加属性来非常容易的改变布局。 容器属性 flex-direction—————决定主轴的排列方向，属性决定从哪边开始 row ————————从main axis的左端开始排列 row-reverse ——...
flex布局有关属性整理
qq_42357338的博客
07-17 268
一、flex容器属性有： flex-direction:设置主轴方向，可设置的属性值有 a. row：表示横向排列，从左至右 b. row-reverse：表示横向排列，从右至左 c. column：表示纵向排列，从上至下 d. column-reverse：表示纵向排列，从下至上排列 flex-wrap:设置一条轴线排不下如何换行，属性值有 a.wrap:内容超过后换行 b.nowrap:不换行，总是在一行显示 c.wrap-reverse:换行后有两行，reverse就是把两行的排列顺序倒过来 3.j
flex布局的各个属性
05-07
以下是Flex布局的常见属性及其含义： 1. 父容器的属性 - display：定义为flex布局 - flex-direction：定义主轴的方向 - flex-wrap：定义是否要换行 - flex-flow：flex-direction 和 flex-wrap 的复合属性 - justify-content：定义主轴上的对齐方式 - align-items：定义交叉轴上的对齐方式 - align-content：定义多根轴线的对齐方式 2. 子元素的属性 - order：定义子元素的排列顺序 - flex-grow：定义子元素的放大比例 - flex-shrink：定义子元素的缩小比例 - flex-basis：定义子元素在分配多余空间之前的基准大小 - flex：flex-grow, flex-shrink 和 flex-basis 的复合属性 - align-self：定义单个子元素在交叉轴上的对齐方式 以下是一个简单的Flex布局示例： ```css .container { display: flex; /* 定义为flex布局 */ flex-wrap: wrap; /* 定义为可换行 */ justify-content: center; /* 在主轴上居中对齐 */ align-items: center; /* 在交叉轴上居中对齐 */ } .box { order: 2; /* 定义排列顺序为2 */ flex-grow: 1; /* 定义放大比例为1 */ flex-shrink: 1; /* 定义缩小比例为1 */ flex-basis: 100px; /* 定义基准大小为100px */ flex: 1 1 100px; /* 上面三个属性的复合属性 */ align-self: center; /* 在交叉轴上居中对齐 */ } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值