「 Flex弹性布局 (上) 篇 」
- 前话 一直都想花时间去吃一下flex布局,虽然最近写的一些简单页面有使用到flex,但是具体实现还有一些常用属性并不了解,所以想写下这一篇留下记忆!部分内容参考第三发博客,文末提供相应链接
{dotted startColor="#ff6c6c" endColor="#1989fa"/}
flex布局则是一种新的布局方案,通过为修改父div的display属性,让父元素成为一个flex容器,从而可以自由的操作容器中子元素的排列方式。 例如我们让多个div横向排列,传统做法是使用浮动,但浮空后因为脱离文档流的缘故,父元素会失去高度,这又涉及了清除浮动等一系列的问题 而flex布局相对简单很多,修改父元素display:flex,你会发现div自动就排列成了一行,而且没有浮动之后的副作用,从回流角度考虑,flex的性能更优于float;随着浏览器不断兼容以及旧版本的淘汰,flex布局注定会成为更为流行的布局方案
{dotted startColor="#ff6c6c" endColor="#1989fa"/}
- Flex 布局是什么?
Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性 这里推荐一个示例网站 {abtn icon="" color="#ff6800" href="https://codepen.io/LandonSchropp/pen/KpzzGo" radius="1rem" content="链接"/}
{dotted startColor="#9e7676" endColor="#1989fa"/}
- 条件
假设我们有一个flex容器为
flex-box
,内部设有四个项目box1-4
<div class="flex-box">
<div class="box1">
</div><div class="box2">
</div><div class="box3">
</div><div class="box4">
</div>
</div>
-flex-direction属性
取值: row | row-reverse | column | column-reverse
,一般默认为横向row,若设置为row-reverse则横向但项目反向放置并且靠右
conlumn与conlumn-reverse同理!(下面简单进行示例)
{dotted startColor="#6a60fb" endColor="#233815"/}
- flex-wrap属性 有时候项目横向排列过挤,需要使项目自动换行,我们就可以使用该属性,该属性提供三个值,默认值:nowrap,wrap和warp-reverse;在nowarp的状态下如果横排项目的宽度超过外部容器很多则会压缩自己的宽度来兼容,而warp则可以解决这一现象,下面假设第一个项目增宽超过容器并且使用warp来解决(该示例仍以前面示例修改而来 )
{dotted startColor="#ff6c6c" endColor="#1989fa"/}
有趣的是-使用warp-reverse将会项目朝下为底部,且第一项目等依次会存在于下方
{dotted startColor="#ff6c6c" endColor="#1989fa"/}
- flex-flow属性
flex-flow属性是flex-deriction与flex-wrap属性的简写集合,默认属性为row nowrap,即横向排列,且不换行,如果需要控制项目排列与换行,推荐使用此属性,而非单独写两个,懂上面那俩属性这属性就会运用了
-justify-content属性 该属性主要修改项目的对齐方式 主要有这几种:
flex-start(默认值):左对齐 flex-end:右对齐 center: 居中 space-between:两端对齐,项目之间的间隔都相等。 space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍
默认状态下为左对齐,上方第一张图即默认左对齐(没修改状态下也是) 关于右对齐则flex-end
{dotted startColor="#ff6c6c" endColor="#0b0f14"/}
关于居中 center
//space-beteen会贴近两边并与其他项目产生间隔
而space-around不会
{dotted startColor="#ff6c6c" endColor="#1989fa"/}
下篇等待更新!
相关文章
- CSS Flex弹性布局详解! (常用的12个属性)
- 11·灵魂前端工程师养成-CSS最强大的布局Grid
- flex布局垂直居中并换行展示内容
- Allegro打印出1:1的layout布局图。
- CSS 零基础到实战(05)布局、盒子模型、弹性盒子【前端就业课 第二阶段】
- css面试点四:css3弹性盒子模型-flex布局详解
- 玩转 CSS Flexbox 弹性布局
- 小游戏赛道迎来新一轮增长机会,技术升级实现多平台布局
- Chrome 108 :发布新的 CSS 布局单位!
- 【JetPack】视图绑定 ( ViewBinding ) 各种应用 ( 视图绑定两种方式 | Activity 布局 | 对话框布局 | 自定义组件布局 | RecyclerView 列表布局 )
- 【约束布局】ConstraintLayout 引导线 Guideline 约束 ( 简介 | 可视化操作 | 属性 | 水平引导线 | 垂直引导线 | 开始结束尺寸 | 百分比位置 | 约束组件 )
- 【错误记录】布局组件加载错误 ( Attempt to invoke virtual method ‘xxx$Callback android.view.Window.getCallback()‘ )
- 104条PCB 布局布线技巧问答
- 使用flex弹性造APP首页轮子【前端Flex弹性布局】
- Android弹性收缩自适应布局FlexboxLayout详解手机开发
- CSS基础 – 弹性盒子模型 – flex布局详解编程语言
- 专访金蝶征信总经理董聪:ERP云时代的金融布局
- 曾与大疆和3DR合作,如今微软投资它千万美金为“空域”布局
- 兴业银行数字化“转型+赋能”全布局
- 布局遇到的问题非常不错的见解
- CSS网页布局入门教程5:二列宽度自适应
- CSS网页布局入门教程9:用CSS设计网站导航——横向导航