移动web基础(三) 弹性盒子下

1.设置主轴方向

主轴默认是水平方向, 侧轴默认是垂直方向
修改主轴方向属性: flex-direction
属性值:默认为row 水平x 主轴排列

属性值	作用
`row`	行, 水平(默认值)
`column`	*列, 垂直
row-reverse	行, 从右向左
column-reverse	列, 从下向上

2.弹性盒子换行

弹性盒子默认x轴排列不会进行主动换行,即使给予固定宽高,也会随宽度大小而改变
弹性盒子换行显示 : flex-wrap: wrap 宽度不够自动换行 nowrap为不自动换行

3.设置侧轴对齐方式

侧轴多行的垂直对齐方式: align-content
侧轴单行垂直对齐: align-items
content 主轴对齐方式: justify-content
align-content 侧轴多行对齐

属性值	作用
flex-start	默认值, 起点开始依次排列
flex-end	终点开始依次排列
center	沿主轴居中排列
space-around	弹性盒子沿主轴均匀排列, 空白间距均分在弹性盒子两侧
space-between	弹性盒子沿主轴均匀排列, 空白间距均分在相邻盒子之间

4.flex 总结梳理

flex 它是一种布局方式。主要目的是通过父盒子控制子盒子如何排列,一定是亲爸爸和亲儿子
盒子容器,换行,对齐方式一定给亲父元素
侧轴多行对齐:align-content
侧轴单行对齐:align-items

移动web基础(三) 弹性盒子下相关推荐

0507css3基础：弹性盒子、媒体查询
|-弹性盒子 |--定义弹性盒子 display:flex |--定义子元素的排列方式 flex-direction |--定义子元素的换行方式 flex-wrap |--定义子元素的对齐方式 ...
CSS三栏布局的7种方式代码详解 | 圣杯布局 | 双飞翼布局 | 弹性盒子
CSS三栏布局代码详解写在前面:博主最近在转头复习最前面学的CSS,整理一下CSS三栏布局的笔记,正好也捋顺自己的逻辑思路.解析我尽量按照思路详细的写了,代码均可正确运行,留给需要的小伙伴进行参考, ...
HTML+CSS_第三部分(Flex弹性盒子布局、grid网格布局、移动端、移动端流式布局、移动端rem布局、响应式布局、Bootstrap框架)
文章目录 (1)Flex弹性盒子布局一: 父容器上的属性 1. display:flex 设置为弹性盒子(写在父容器上) 2.flex-direction值设置子项的布局方向(写在父容器上) 3. ...
大数据基础学习三：Ubuntu下安装VMware Tools超详细步骤及需要注意的问题（以ubuntu-18.04.3、Mware Workstation 15.1.0 Pro为例）
大数据基础学习三:Ubuntu下安装VMware Tools超详细步骤及需要注意的问题 (以ubuntu-18.04.3.Mware Workstation 15.1.0 Pro for Window ...
flex布局(弹性盒子三)
在之前的文章里说到了弹性盒子的部分属性,接下来接着说弹性盒子的其余属性目录弹性盒子的属性及其属性值 1.order 顺序指定:用css指定顺序,不用html排序 2.flex-grow 子项目延伸 ...
Web基础（三）Python Web
文章目录 Python Web基础 1. WSGI 1.1 概述 1.2 实现原理 1.WSGI Server/gateway 2.WSGI Application 3.WSGI MiddleWare ...
弹性盒子模型中`display:flex`布局下`white-space:nowrap`失效问题
文字长度过长显示省略号的样式设置方法众所周知:  .css {white-space: nowrap;overflow: hidden;text-overf ...
Web基础总结（HTML、CSS等）
Web基础总结前言 HTML 元素和属性内容元素 head meta title base link body 表单元素功能元素其他元素分组元素页面交互元素语义元素全局属性 style ...
ajax 弹性盒子 css3动画
ajax 1. 什么是ajax?ajax不是一种开发语言,它是在现有的js/html/css样式基础上,实现在不重新加载整个页面的情况下,与服务器进行简单的数据交互,通过js操作DOM进行页面局部更新 ...

移动web基础(三) 弹性盒子下

1.设置主轴方向

2.弹性盒子换行

3.设置侧轴对齐方式

4.flex 总结梳理

移动web基础(三) 弹性盒子下相关推荐

最新文章

热门文章