网页布局是css的一个重点应用。传统的布局都是依赖display、position、float属性来实现的,但是特殊布局就不易实现,如垂直居中。

01 flex布局是什么?‍

Flex 是 Flexible Box的简写,意为“弹性布局”为盒模型提供最大灵活性。任何一个容器都可以指定为flex布局。

采用flex布局的元素,称为flex容器。他的所有子元素自动成为容器成员,称为flex项目,简称项目。

容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。

02容器的属性

  • flex-direction 设置排列方向(向下、向上、向左、向右)的

  • flex-wrap 内容放置不下时换行方式

  • flex-flow 是flex-direction和flex-wrap属性简写默认值row nowrap

  • justify-content 定义在主轴上的对齐方式。

  • align-items 定义项目在交叉轴上如何对齐。

  • align-content 定义多根轴线的对齐方式

flex-direction属性值有四个:

row(默认值):水平方向,从左到右,起点在左。

row-reverse:水平方向,从右到左,起点在右。

column:垂直方向,从上到下。

column-reverse:垂直方向,从下到上。

flex-wrap属性值有三个:

nowrap:不换行。

wrap:正常换行,在第一行下方。

wrap-reverse:换行,在第一行上方。

justify-content属性值有五个:

flex-start(默认值):左对齐

flex-end:右对齐

center:居中

space-between:两端对齐

space-around:每个项目两侧的间隔相等。

align-items属性值有五个:

flex-start:交叉轴的起点对齐。

flex-end:交叉轴终点对齐。

center:交叉轴中点对齐。

baseline:项目的第一行文字的基线对齐。

stretch(默认值):如果项目未设置高度或设置为auto,将占满整个容器的高度。

align-content属性值六个:

flex-start:交叉轴的起点对齐。

flex-end:交叉轴终点对齐。

center:交叉轴中点对齐。

space-between:与交叉轴两端对齐,轴线之间间隔平均分布。

space-around:每根轴线两侧间隔都相等。

stretch(默认值):轴线占满整个交叉轴。

03项目属性

  • order:定义项目的排列顺序,数值越小,排列越靠前,默认为0。

  • flex-grow属性:定义项目的放大比例,默认为0

  • flex-shrink:定义项目的缩小比例,默认为1。

  • flex-basis:定义在分配多余空间之前,项目占据的主轴空间。默认值为auto,即项目本来大小。

  • flex:是flex-grow、flex-shrink、flex-basis的缩写,默认值0 1 auto。

  • align-self:属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。

flex布局制作自适应网页的更多相关文章

  1. 慕课网5-2编程练习:flex布局制作卡片布局案例

    慕课网5-2编程练习:flex布局制作卡片布局案例 小伙伴们,学习了卡片布局,接下来我们根据效果图,也写出一个卡片布局的页面吧! 效果图如下: 任务 1.主体内容的卡片一行只能显示两个. 2.卡片与卡 ...

  2. Flex布局做出自适应页面--语法和案例

    本文发布在: github项目地址:https://github.com/tenadolanter/flex-layout-demo SegmentFault地址:https://segmentfau ...

  3. Flex 布局教程

    今天给大家分享一下flex布局的语法 网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于 ...

  4. display:flex 布局详解(2)

    1.  flex设置元素垂直居中对齐 在之前的一篇文章中记载过如何垂直居中对齐,方法有很多,但是在学习了flex布局之后,垂直居中更加容易实现 HTML代码: <div class=" ...

  5. 利用@media screen实现网页布局的自适应

    利用@media screen实现网页布局的自适应 优点:无需插件和手机主题,对移动设备友好,能够适应各种窗口大小.只需在CSS中添加@media screen属性,根据浏览器宽度判断并输出不同的长宽 ...

  6. flex 布局 input 宽度不自适应

    flex 布局 input 宽度不自适应 解决方法: 给 input 加上min-height 解决!

  7. flex布局嵌套之高度自适应

    查遍各大资源无任何flex嵌套布局的例子,经过自己折腾完成了项目中的高度自适应需求(更多应用于前端组件) 效果图: html代码:(关键地方已经用颜色特别标识 ^_^) <!DOCTYPE ht ...

  8. 实现网页布局的自适应 利用@media screen

    利用@media screen实现网页布局的自适应,IE9一下不支持 @media screen /*1280分辨率以上(大于1200px)*/ @media screen and (min-widt ...

  9. flex布局无法自动适应的bug以及实现textarea根据内容自适应

    -webkit-box布局无法自动适应高度的bug css3的新属性display:-webkit-box带来了前端开发自动适应布局的春天 ,但是我发现这个布局有个问题, 而且这个问题我无法解决: 描 ...

随机推荐

  1. java中存储mysql数据库时间类型【date、time、datetime、timestamp】

    在MySQL中对于时间的存储自己见表的时候都是设置的varchar类型的,感觉挺方便的. 昨天拿别人建好的表写代码,发现这张表中时间类型为datetime的,凭感觉试了一下不行,网上查了刚开始试了好几 ...

  2. 激光SLAM与视觉SLAM的特点

    激光SLAM与视觉SLAM的特点 目前,SLAM技术被广泛运用于机器人.无人机.无人驾驶.AR.VR等领域,依靠传感器可实现机器的自主定位.建图.路径规划等功能.由于传感器不同,SLAM的实现方式也有 ...

  3. 单目摄像头检测6D姿态

    单目摄像头检测6D姿态 CVPR2019: ROI-10D: Monocular Lifting of 2D Detection to 6D Pose and Metric Shape 论文链接: h ...

  4. Caffe框架GPU与MLU计算结果不一致请问如何调试?

    Caffe框架GPU与MLU计算结果不一致请问如何调试? 某一检测模型移植到Cambricon Caffe上时,发现无法检测出结果,于是将GPU和MLU的运行结果输出并保存后进行对比,发现二者计算结果 ...

  5. GPU上的快速光谱图分区

    GPU上的快速光谱图分区 图形是用于对物理,生物,社会和信息系统中许多类型的关系和过程进行建模的数学结构.用于解决各种高性能计算和数据分析问题.对于网络分析,基因组学,社交网络分析和其他领域,大规模图 ...

  6. 为x86 CPU自动调度神经网络

    为x86 CPU自动调度神经网络 对特定设备和工作负载进行自动调试对于获得最佳性能至关重要.这是有关如何使用自动调度器为x86 CPU调试整个神经网络的文档. 为了自动调试神经网络,将网络划分为小的子 ...

  7. Jmeter读取python生成的参数

    一.环境准备 1.准备python文件,测试脚本执行结果:下图中的打印的信息即JMeter预期要获取的参数信息 2.准备bat文件 3.添加 OS Process Sampler读取批处理文件 二. ...

  8. python_appium 之使用Appium Inspector定位工具进行元素识别,编写验证demo

    一.前提条件 appium环境搭建完成,模拟器Genymotion 安装完成,且已经下载成功了模拟设备 二.元素识别操作步骤及demo 1.进入appium如下菜单 2.填写Desired Capab ...

  9. Redis系列(一):安装

    本系列介绍Redis,从安装到使用,太简单的使用不介绍了,介绍一些比较有意思的功能,也会介绍一些原理性的东西.本篇先介绍Redis的单实例安装.Redis还可以做到高可用,通过哨兵和集群可以做到高可用 ...

  10. UF_TRNS 变换相关

    Open C uf5940uf5941uf5942  矩阵乘积变换uf5943  平移变换uf5944  缩放变换uf5945  旋转变换uf5946  镜像变换uf5947  实现变换,根据变换矩阵 ...