[新知速递04] flex布局设置主轴/侧轴对其方式 总结梳理
设置主轴方向
主轴默认是水平方向, 侧轴默认是垂直方向
修改主轴方向属性: flex-direction
| 属性值 | 作用 |
|---|---|
row
|
行, 水平(默认值) |
column
|
*列, 垂直 |
| row-reverse | 行, 从右向左 |
| column-reverse | 列, 从下向上 |
语法：
flex-direction：column;
修改完毕，主轴是Y轴， 侧轴是X轴。
如何去算是几背图
精灵图的宽度/装精灵图盒子的宽度=倍数
修改主轴经常的使用场景：
请完成如下场景：
比如：
弹性盒子换行
特性： 给父亲添加了
display: flex;所有的子盒子（弹性盒子）都会在一行显示，不会自动换行。
弹性盒子换行显示 : flex-wrap:
语法：
flex-wrap: wrap;
设置侧轴对齐方式
注意:
此处设置侧轴多行的垂直对齐方式。
align-content（少）和前面学过的
align-items（侧轴单行垂直对齐） （多）align 垂直 比如 align-items 垂直对齐 align-content 多行垂直对齐
content 主轴 justify-content align-content 侧轴多行对齐
align-content：center；
| 属性值 | 作用 |
|---|---|
| flex-start | 默认值, 起点开始依次排列 |
| flex-end | 终点开始依次排列 |
| center | 沿主轴居中排列 |
| space-around | 弹性盒子沿主轴均匀排列, 空白间距均分在弹性盒子两侧 |
| space-between | 弹性盒子沿主轴均匀排列, 空白间距均分在相邻盒子之间 |
flex 总结梳理
flex 它是一种布局方式。 主要目的是通过父盒子控制子盒子如何排列,一定是亲爸爸和亲儿子
主轴排列方式（重点）
默认的水平，但是可以转换。
如果给父盒子添加 display: flex
justify-content: center;
justify-content: space-between; 左右两侧无缝隙
justify-content: space-around; 两倍关系
justify-content: space-evenly; 缝隙均等
侧轴对齐方式-单行对齐（重点）
默认的对齐方式 stretch 拉伸
顶对齐 flex-start
align-items: center; (重点)
侧轴对齐方式-多行
align-content: space-between;
align-content: space-around;
align-content: space-evenly;
align-content: center;
弹性盒子换行（重点）
特别是多行的情况下，我们需要给弹性盒子换行，给 父盒子 弹性容器加。
flex-wrap: wrap;
设置主轴方向（重点）
flex-direction: column;
让我们的主轴设置为垂直。 默认的是 row 水平的。
应用场景
[新知速递04] flex布局设置主轴/侧轴对其方式 总结梳理相关推荐
- 一文让你学会flex布局关于主轴 、侧轴的布局方式
flex布局 一.Flex布局/弹性布局: Ø 是一种浏览器提倡的布局模型 Ø 布局网页更简单.灵活 Ø 避免浮动脱标的问题 二. flex相关的属性 设置flex布局 用display:flex必须 ...
- flex布局 flex布局的主轴对齐方式
认识flex布局 flex布局弹性布局 使用flex布局 标签之间没有元素之分(块 行内 行内块) 可以随意设置宽高 父元素添加display:flex 弹性容器 子元素自动变成弹性盒子(弹性盒子没有 ...
- flex布局设置flex后容器被内容撑开
就和图片中的效果一样.容器大小是不确定的,要根据内容来决定.但是被内容撑开,使用word-wrap:break-word;强制换行文字和字母无效 这时将盒子的width设置为 0 ,然后使用 flex ...
- Flex布局设置内容强制不换行无效的解决方法
使用弹性盒子Flex布局非常方便,比如实现左右布局的时候,简短的两行样式就实现了.不过虽然Flex布局很灵活,但有时候也会出现一些意想不到的效果,比如这里举个简单的示例: <style> ...
- flex布局设置justify-content为space-between，最后一个元素无法右对齐
给flex盒子设置justify-content:space-between,双行排列时出现最后一个元素无法右侧对齐的情况,如下图所示. 可以看到item4和item2在右侧没有对齐,代码如下: &l ...
- flex布局——最后一行左对齐的实现方式(css功能实现)
在学习了css3之后,经常会用到的布局就是flex布局了. 比如要实现下图的这种布局: 给父级设置display:flex; 实现一行中内容靠边对齐,则需要设置justify-content:spac ...
- 通过Flex布局设置水平垂直居中
效果如下: 实现代码: 通过给父元素设置CSS样式: display:flex; align-items:center; justify-content:center; //HTML<div c ...
- flex布局设置宽度不生效，高度生效
首先先理解一下这个flex 1 . 原理其实我也不太懂,后来才知道它的内部都是用动态公式进行内部计算的 .具体详细说,就不太懂. 2. 刚开始我是这样用的flex. .right-aisle-box ...
- flex布局设置换行无间隙
display: flex; flex-wrap: wrap; 再加上一句 align-content: flex-start:
最新文章
- 顶尖程序员不同于常人的 5 个区别
- Douglas-Peucker算法
- 十一好礼，90份新品MCU开发板免费送！
- .net中close和dispose及关闭流操作
- 最流行的python爬虫框架_Python最火爬虫框架Scrapy入门与实践
- SAP Spartacus HTML Tags 实现介绍
- 【转载】Linux下有趣的命令
- Xamarin效果第三篇之手机底部弹窗
- Linux各发行版本简介
- java中的位移运算符_java中的移位运算符(, , )
- 去中心化加密指数协议DeHive即将4月14日启动公募
- JUnit 4 vs JUnit 5
- 定时器触发STM32 ADC的采样转换示例
- “神舟八号”飞船将瞄准11月1日5时58分发射
- 聚宽量化投资策略研究
- 什么是ribbon？
- 网络安全面试常见问题
- 数据可视化图表总结（一）
- 一辆智能小车，最初（时间为0)的位置为(0,0)，我们想知道它最后的位置。小车以每小时10公里的速度向北移动（以北为y轴正向，以东为x轴正向）。小车会受到一系列依照时间戳记排序的命令，1表示“向左转”
- 闲鱼的统一跨端 API 方案 —— Uni API