在html5中flex布局详解,Flex布局详解(一)
在讲解Flex布局之前,我们首先可以回顾一下我们平时在做行向布局或者纵向布局时候我们页面的布局主要用到哪些布局方法或者思路。
1、normal flow (正常流,也叫文档流)--内联元素从左往右排列,块级元素从上往下排列。
2、float+clear(浮动+清除)
3、position relative+absolute(绝对定位)
4、display inline-block (行向布局)
5、负margin
Flex布局的特点:
1、块级布局侧重垂直方向、行内布局侧重水平方向,flex布局是与方向无关的。
2、flex布局可以实现空间自动分配,自动对齐(flexible:弹性、灵活)
3、flex适用于简单的线性布局,更复杂的布局要交给grid布局
flex布局图解
图解重点理解1和2里面都是叫flex item,包裹1和2边框叫flex container。其次要注意是主轴方向不一定是横的,也可以是竖的,侧轴也是一样。
1、flex container的属性:
(1)、flex-direction 方向
(2)、flex-wrap 换行
(3)、flex-flow 上面两个简写
(4)、justify-content 主轴方向对齐方式
(5)、align-items 侧轴对齐方式
(6)、align-content 多行/列内容对齐方式(用得较少)
(1)、flex-direction常用得属性值有row、row-reverse、column、column-reverse,默认情况下属性值是row。
HTML
CSS
.parent{
background:#ddd;
display:flex;
flex-direction:row; //更改属性值得下面四个效果图
}
.child{
width:50px;
height:50px;
background:white;
margin:10px;
}
值为row时
值为row-reverse时
值为column时
值为column-reverse时
(2)、flex-wrap常用得属性值有wrap、nowrap、wrap-reverse,默认情况下属性值是nowrap。
HTML
CSS
.parent{
background:#ddd;
display:flex;
flex-direction:row;
flex-wrap:nowrap; //更改属性值可以得下面三图效果
}
.child{
width:50px;
height:50px;
background:white;
margin:10px;
}
值为nowrap时
值为wrap时
值为wrap-reverse时
(3)、flex-flow其实是flex-direction和flex-wrap两个缩写,其中属性值可以搭配使用。
CSS
.parent{
background:#ddd;
display:flex;
flex-flow:column wrap;
height:300px; //这个细节要注意,不给父元素高度,会导致不会换行,因为高度一直往下延伸
}
.child{
width:50px;
height:50px;
background:white;
margin:10px;
}
属性值为column和wrap时
(4)、justify-content常用得属性值有center、flex-start、flex-end、space-around、space-between。
CSS
.parent{
background:#ddd;
display:flex;
flex-direction:row;
justify-content:center; //更改属性得下面5图
}
.child{
width:50px;
height:50px;
background:white;
margin:10px;
}
值为center时,子元素居中
值为flex-start时,子元素往起点距靠拢
值为flex-end时,子元素往终点距靠拢
值为space-around时,多余空间平均自动分配子元素四周
值为space-between时,多余空间平均自动分配在两个子元素之间
(5)、align-items常用得属性值有stretch、center、flex-start、flex-end,默认值是stretch。
1
1
1
1
1
2
2
2
CSS
.parent{
background:#ddd;
display:flex;
flex-direction:row;
flex-wrap:nowrap;
justify-content:space-around;
align-items:flex-end; //属性值改变时如下图变化所示
}
.child{
width:50px;
background:white;
}
值为stretch时
值为center时,居中
值为flex-start时,侧轴顶部对齐
值为flex-end时,侧轴底部对齐
(6)、align-content常用得属性值有stretch、center、flex-start、flex-end,默认值是stretch。(这个特性比较少用,用于调节多行间距距离,大概理解一下就行)
CSS
.parent{
background:#ddd;
display:flex;
flex-direction:row;
flex-wrap:wrap;
height:230px;
align-content:center; //更改属性值如下图所示变化
}
.child{
width:50px;
height:90px;
background:white;
margin:1px;
}
值为stretch时
值为flex-start时
值为flex-end时
值为center时
在html5中flex布局详解,Flex布局详解(一)相关推荐
- oracle em中查看jiob,HTML5 中的 b/strong、i/em 详解
这篇文章主要聊一聊 HTML5 中的 和 ,以及 和 . 从页面显示效果来看,被 和 包围的文字将会被加粗,而被 和 包围的文字将以斜体的形式呈现.那大家可能就会疑惑了,既然效果一样,那为什么还要重复 ...
- html video标签 mp3,html5中的video标签和audio标签详解
一.基础 src 音乐资源的路径 autoplay 播放 controls 控制面板 loop 循环播放 muted 初始静音 audio支持的音乐格式有mp3 ogg wav 你的浏览器太辣鸡了,不 ...
- HTML5中 HTML列表/块/布局 韩俊强的博客
从简单到复杂HTML5详解:每日更新关注:http://weibo.com/hanjunqiang 新浪微博! 1.HTML列表 1.有序 2.无序 3.有序star属性 4.有序无序列表 代码: ...
- DIV+CSS布局概述、属性(浮动、定位等)、布局类型、常见布局技巧
文章目录 布局概述 网页布局 页面元素定位机制 布局常用属性 浮动属性(float) 清除属性(clear) 定位属性(position) 溢出属性(overflow) 层叠属性(Z-index) 布 ...
- html子布局不超出父布局,详解flex布局中保持内容不超出容器的解决办法
在移动端,flex 布局很好用,它能够根据设备宽度来自动调整容器的宽度,用起来很方便,已经越来越离不开它,但是最近在做项目的时候发现一个问题. 就是在一个设置了 flex:1 的容器中,如果文字很长, ...
- 移动开发—详解flex布局之携程网首页案例制作
移动开发-详解flex布局之携程网首页案例制作 学习内容 一.flex的布局原理 二.flex布局父项常见的属性 三.flex布局子项常见的属性 四.携程网首页案例制作 一.flex的布局原理 总结f ...
- [转]详解Flex布局(语法+教程)
Flex 布局教程:语法篇 作者: 阮一峰 原文:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 网页布局(layout)是 CSS ...
- 弹性布局(display:flex;)属性详解
一.Flex布局-前言 Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性,旨在提供一个更有效地布局.对齐方式,并且能够使容器中的子元素大小 ...
- 详解flex布局(flexbox)完整指南
一.背景 Flexbox Layout(Flexible Box) 模块(截至2017 年 10 月的 W3C 候选推荐标准)旨在提供一种更有效的方式来布置.对齐和分配容器中项目之间的空间,即使它们的 ...
最新文章
- python找不到reshape_如何加速Python程序
- 最小生成树(kruskal、prim、最小生成森林问题、严格次小生成树)
- Python数据可视化词云展示周董的歌
- ThinkPHP讲解(一)框架基础
- 6款html5模板下载
- golang new和make却别
- centos8搭建glusterfs服务
- Python实战从入门到精通第十八讲——改变对象的字符串显示
- 指定复制的数据库或者表
- 语音识别系统市场前景及发展趋势
- C++ 多态与虚函数面试题
- java json jquery_JQuery提交JSON string数据
- 科学计算机clr,怎么用科学计算器解方程?
- C++中的DLL调用0x00000000错误
- iOS 15 正式版发布,210 条改进大汇总
- 亲测可用--word报错:子过程或函数未定义
- WIN10 mscomm32注册,亲测可用
- Redis分布式锁剖析和几种客户端的实现
- 阿尔法蛋机器人tf卡_阿尔法蛋机器人哪款好适合几岁孩子,超能蛋早教机真实效果评测(价格309元)...
- 2019年 Android 开源框架 排行榜 TOP 60
热门文章
- SpringBoot使用mybatis-autogenerator时,显示Failure to find org.eclipse.m2e:lifecycle-mapping:pom:1.0.0错误
- 运维工程师一天的日常都在做什么?
- XDM2020 Java版类似IDM微软下载器的开源下载工具编译
- C语言二位十进制计算器模数,十进制转二进制计算器
- 网页设计中分栏布局的几种实现方案
- python存储JSON
- 解决chrome浏览器手机调试模式下鼠标指针消失(量化范围设置无效情况)
- python语法详解_关于python:NLTK中解析的英语语法
- 利用vbs维护qtp的虚拟对象的坐标
- 读《曾国藩》笔记2--慈不掌兵