[新知速递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:
最新文章
- idea 搭建spring boot 项目
- 小马智行Pony.ai 2020校招正式开启
- ant vue 树形菜单横向显示_丝滑般 Vue 拖拽排序树形表格组件Vue-DragTreeTable
- myeclipse中删除tomcat 的server后，重新添加进来的方法
- java时间格式转换
- 一文了解几十万年的科技史
- 2017计算机基础模拟试题,2017年计算机一级考试PS及基础模拟多选试题
- mysql学习笔记 51_mysql学习笔记
- 计算机路由器无线级联配置,两个无线路由器级联怎么设置?
- 用python写一个躲避球十分简单的小游戏
- 【2018年11月12日】其他化学制品行业的股票估值
- SKLEARN实例：【泰坦尼克号生存者预测】
- 无心剑中译伊丽莎白·毕肖普《一门技艺》
- xilinx vivado 2019 cordic ip 计算sin cos
- Android中的Menu功能菜单-OptionsMenu[选项菜单]
- cas87345-22-0/5-(羟苯基)-10,15,20-苯基卟啉/分子式：C44H30N4O/分子量：630.7352/货期一周
- 传说中的b站mac客户端(支持M1芯片、适配Big Sur)-bilibili mac客户端
- 解决 HttpServletRequest 流数据不可重复读
- AVL Cruise和MATLAB DLL联合仿真时快速生成Simulink模型的方法
- 计算机毕业设计Java居家养老系统(源码+系统+mysql数据库+lw文档)