flex 修改生成html,CSS Flex –动画教程
如果一张图片胜过千言万语 —— 那么动画呢? Flex 无法通过文字或静态图像有效地完全解释。为了巩固你对flex的了解,我制作了这些动画演示。
注意 overflow: hidden 行为类型是默认值,因为 flex-wrap 还未设置。
为了获得更好的想法,你可以在这个页面上去尝试一下 Flex Layout Editor。
按默认 flex不会包装你的内容。它的工作原理很像 overflow: hidden。
可能你在学习 flex 时第一个接触到的就是 flex-wrap。
Flex Wrap
让我们添加 flex-wrap:wrap 来看看它是如何改变 flex 项的行为的。
基本上,它只会扩展容器高度并将物品包裹起来。
注意:即便是未指定容器得高度(auto/unset)仍然会这样。
wrap
如果你有一些内容大小未知且数量也未知的项目,并且希望在屏幕上全部显示它们时,这是一种常见模式。
可以用 flex-direction: row-reverse 来反转项目的实际顺序。
row-reverse
这可以用于需要从右到左的顺序阅读的内容。
你可以 “float:right” 所有与 flex-end 在同一行上的项目。
这与 row-reverse 不同,因为它保留了项目的顺序。
Justify Content
justify-content 属性负责 flex 项目的水平对齐。
它看起来很像前面的例子……除了项目的顺序。
flex-end
在以下示例中(justify-content: center),所有项目将自然地聚集到父容器的中心 —— 无论其宽度怎样。它与 position: relative; margin: auto 相似。
center
Space between 意味着所有 内部 项目之间有空格:
space-between
下面这个似乎与上面的完全相同。那是因为它的内容同样是整个字母表。如果用较少的弹性项目,效果会更明显。它们的不同之处是处于角落的项目的外边距。
使用 space-between 属性(上图)处于角落的项目没有外边距。
使用 space-around 属性(下图)所有项目的边距相同。
space-around
下面这个动画是相同的例子,只不过 middle 元素更宽一些。
space-around
尽管你在前面看到了这些演示,但你仍然需要在自己的环境中去尝试 flex,这样才能是你真正理解布局。这也是我决定制作本教程的原因。这些动画受限于项目大小。你尝试的结果可能会因内容的具体情况而异。
对齐内容
上面的所有例子都涉及 justify-content 属性。不过即便涉及到自动折行,你也可以在 flex 中进行垂直对齐。
属性 justify-content(上面的所有示例)和 align-content(下面)采用完全相同的值。它们仅在两个不同的方向上对齐 —— 相对于存储在柔性容器中的项目的垂直和水平方向上。
接下来探讨 flex 如何处理垂直对齐:
align-content:space-evenly
关于 space-evenly 的一些现象:Flex 自动分配足够的垂直空间。
项目行与相等的垂直边距空间对齐。
当然,你仍然可以修改父级的高度,并且所有内容仍然可以正确对齐。
实际应用中的情况
在实际布局中,你不会有一长串的文字,你将会使用一些独特的内容元素。到目前为止我只简单演示了动画中的 flex 是如何工作的。
当涉及到实际布局时,你可能希望对较少同时更大的项目使用 flex。就像真正网站上的那些内容一样。
我们来看几个想法……
均匀排列
对于 align-content 和 justify-content 使用 space-evenly 会对具有5个正方形的一组项目产生以下影响:
奇数项目的效果不是很好
当涉及 flex 的开箱即用的响应区域时,首先要确保尽可能使项目的宽度保持相同。
请注意,因为此示例中的项目数为 奇数个(5),所以这种情况不会产生你想要的那种理想的响应效果。使用偶数数字可以解决这个微妙的问题。
现在,考虑将相同的 flex 属性用在偶数个项目上:
以更自然的方式响应偶数个项目
使用偶数个项目,你可以实现更清晰的响应式缩放,而无需用 CSS Grid 或 JavaScript magic。
十多年来,在布局设计中垂直居中的项目已成为一个巨大的问题。
最后用 flex 解决了。 (呃……你也可以用 css grid 来解决。)
但是在 flex 中,在两个维度中使用 space-evenly 值会对内容自动调整,即使项目的高度可变:
完美的对多个不同高度的项目垂直对齐
以上是对未来10年最常用的响应式 flex 的描述(开个玩笑!!)。
如果你正在学习flex,你会发现这通常是最有用的一组 flex 属性。
最后,下面的动画演示了所有可能会用到的值:
flex-direction: row; justify-content: [value];
flex-direction: column; justify-content: [value];
我建议你在 CSS grid 中使用这些类型的 flex 项目。 (你用的越多就会越明白 grid + flex。)不过使用 flex-only 布局也没有任何问题。
要明确指定元素的大小
如果不这样做,一些 flex 缩放将无法正常工作。
相应地使用 min-width,max-width 和 width / height。
这些属性可以对整个 flex 可伸缩性产生影响。
以上!希望你能够喜欢这篇文章。
flex 修改生成html,CSS Flex –动画教程相关推荐
- css flex 文字右对齐,css flex align-items属性 交叉轴上对齐方式垂直对齐方式
css flex align-items属性 交叉轴上对齐方式垂直对齐方式 css flex align-items属性子元素在交叉轴上对齐方式,如果不好理解,可以把flex-direction设置为 ...
- html div flex,利用css flex实现垂直居中
应用flex实现垂直居中 行使css flex完成垂直居中.flex笼统不是实现垂直居中最好的决定,由于IE8,9其实不支持它. 那会,为了用flex实现垂直居中,咱们首先要确立一个包裹着图片的div ...
- 1.CSS3 教程-> 多列布局 > image模块 > cssTransition 过渡 > CSS Animations 动画 > Transform二维
CSS3 教程 多列布局 image模块 cssTransition 过渡 CSS Animations 动画 Transform二维 介绍 CSS3 是层叠样式表(Cascading Style S ...
- css flex属性学习笔记
参考文献 flex: 1 0calc((100% / min(var(--cx-active-view), var(--cx-max-views))) -var(--cx-split-gutter)) ...
- css布局方式_手把手教你CSS Flex布局「真香」
作者:EcbJS 转发链接:https://blog.csdn.net/EcbJS/article/details/106466757 前言 之前做项目,关于布局方面没怎么深入研究过,好多页面都是 ...
- css flexbox模型_Flexbox-Ultimate CSS Flex速查表(带有动画图!)
css flexbox模型 This comprehensive CSS flexbox cheatsheet will cover everything you need to know to st ...
- css不换行省略号 没作用,flex布局下,css设置文本不换行时,省略号不显示的解决办法...
大致是有一个 main 容器是 flex 布局,左边一个 logo 固定宽高,右边 content 动态宽度. a name a info Lorem ipsum dolor sit amet, co ...
- Css 弹性布局(Flex)详细介绍(Flex 属性详解、场景分析)
目录 前言 Flex 布局是什么? Flex 简介 Flex 容器属性 Flex 基本使用 场景一 flex-direction 场景二 justify-content align-it ...
- css flex 知乎,Oh My God,CSS flex-basis原来有这么多细节
//zxx: 为了演示方便,避免无谓的干扰,本文所有的尺寸均指水平尺寸,对应CSS均是宽度相关,例如width/min-width/max-width. 以前的我对flex-basis不屑一顾,以为就 ...
最新文章
- ubuntu 14.04 双显卡安装NVIDIA GPU驱动+CUDA+编译配置caffe
- 想做网络推广教你如何快速通过SEO考核期呢?
- 看oracle 的数据库位数
- JavaScript实现创建自定义对象的常用方式总结
- Android之面试题精选,自己收藏下
- [Android]使用Gradle提交自己开源Android库到Maven中心库
- FusionChartsFree免费的报表
- python数据变更邮件提醒_Python之Bilibili自动更新邮件提醒并任务栏图标「完整代码」...
- 从首席电力官到首席智能官:紧随时代,不断升级
- win7 IIS误删default website的恢复方法
- python全栈马哥_马哥2018python全栈视频
- Mugeda(木疙瘩)H5案例课—拍拍员工被玩坏了-岑远科-专题视频课程
- 陪孩子的周日-20220123
- 域名解析、域名转向的作用
- 困在“墙”里的中年程序员
- Java实习生常规技术面试题每日十题Java基础(六)
- 两个关于Tomcat利用的好问题
- Linux内核在中国大发展的黄金十年-写于中国Linux存储、内存管理和文件系统峰会十周年之际...
- Tomcat在指定JDK版本启动
- Linux音频驱动之五:UDA1341芯片操作接口
热门文章
- java int相除向上取整_java实战项目常用类,Date、Calendar、BigDecimal、Math、UUID
- java web使用jquery,JAVA_Web_JQuery
- java addlast_Java中的LinkedList addLast()方法: java.util.LinkedList.addLast() - Break易站
- python3兼容python2 print_python 字符串 r raw Python2 和 Python3 的区别及兼容技巧
- 西门子触摸屏修改ip地址_基于博途V15 西门子S7-1200与触摸屏一个简单的例子
- Shell 中各种括号的作用
- Nginx的执行阶段详解
- 【数学】MORE XOR
- 自己动手实现一个html2canvas
- 使用docker搭建wordpress网站