在html5中flex布局详解,Flex布局详解(一)_RandomUnicorn的博客-程序员宅基地

技术标签: 在html5中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布局

e2c7bd6572cc

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

1
2
3

CSS

.parent{

background:#ddd;

display:flex;

flex-direction:row; //更改属性值得下面四个效果图

}

.child{

width:50px;

height:50px;

background:white;

margin:10px;

}

e2c7bd6572cc

值为row时

e2c7bd6572cc

值为row-reverse时

e2c7bd6572cc

值为column时

e2c7bd6572cc

值为column-reverse时

(2)、flex-wrap常用得属性值有wrap、nowrap、wrap-reverse,默认情况下属性值是nowrap。

HTML

1
2
3
4
5
6
7

CSS

.parent{

background:#ddd;

display:flex;

flex-direction:row;

flex-wrap:nowrap; //更改属性值可以得下面三图效果

}

.child{

width:50px;

height:50px;

background:white;

margin:10px;

}

e2c7bd6572cc

值为nowrap时

e2c7bd6572cc

值为wrap时

e2c7bd6572cc

值为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;

}

e2c7bd6572cc

属性值为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;

}

e2c7bd6572cc

值为center时,子元素居中

e2c7bd6572cc

值为flex-start时,子元素往起点距靠拢

e2c7bd6572cc

值为flex-end时,子元素往终点距靠拢

e2c7bd6572cc

值为space-around时,多余空间平均自动分配子元素四周

e2c7bd6572cc

值为space-between时,多余空间平均自动分配在两个子元素之间

(5)、align-items常用得属性值有stretch、center、flex-start、flex-end,默认值是stretch。

1

1

1

1

1

2

2

2

3

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;

}

e2c7bd6572cc

值为stretch时

e2c7bd6572cc

值为center时,居中

e2c7bd6572cc

值为flex-start时,侧轴顶部对齐

e2c7bd6572cc

值为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;

}

e2c7bd6572cc

值为stretch时

e2c7bd6572cc

值为flex-start时

e2c7bd6572cc

值为flex-end时

e2c7bd6572cc

值为center时

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_35241774/article/details/118063679

智能推荐

java拦截器handler_HandlerInterceptor拦截器在spring mvc中的简单使用_一个甲基的博客-程序员宅基地

HandlerInterceptor拦截器在spring mvc中通常用于会员登录过滤,或简单的权限验证等,HandlerInterceptor拦截器是一个接口类,如果要使用它,就必须得新建一个类,实现HandlerInterceptor,并实现里面的方法。例如当一个用户要访问admin后台时,我们要做一个判断,如果该用户没有登录,我们就要让他跳转到login登录界面,下面是spring mvc中...

织梦java_JAVA基础 之System_Victor.ZZ的博客-程序员宅基地

概述: 1.System类代表的是当前JAVA程序的运行平台 2.System类提供了很多静态方法来做系统级的操作(具体见程序) [java] package com.cxy.f; import java.util.Map; public class SystemTest { /** * System类方法使用测试(java 7) */ public static void概述:1.System类...

装箱问题(poj1017)_往事并不人烟的博客-程序员宅基地

问题:六种箱子,底部为长方形,高相等,底部分别为:1x1,2x2,3x3,4x4,5x5,6x6。用6x6的箱子装这些箱子,求最少需要的6x6箱子的数量。输入:输入六个整数k1 k2 k3 k4 k5 k6.分别代表1x1……6x6的箱子的数量 如果连续六个零表示输入结束。输出:输入的每一行对应输出的一行,每一行输出一个整数,代表最小包裹数。输入样例:0 0 4 0 0 17 5 1 ...

Everything研究之读取NTFS下的USN日志文件(2)_weixin_34308389的博客-程序员宅基地

续>>/******************************************2010.11.10更新了代码,调整了一处地方,lowUsn的设置。******************************************/第四步:获取USN Journal文件的基本信息MSDN:http://msdn.microsoft.com...

(转)SpringMVC学习总结_Mathilda91的博客-程序员宅基地

Marvel_Will博客园首页新随笔联系订阅管理SpringMVC学习总结1转自:http://www.cnblogs.com/sunniest/p/4555801.html一、SpringMVC基础入门,创建一个HelloWorld程序1.首先,导入SpringMVC需要的jar包。...

ajax 加载列表,Ajax点击不断加载数据列表_weixin_39763683的博客-程序员宅基地

Ajax点击不断加载数据列表 内容精选换一换已创建在线分析任务,且分析任务正在进行中。打开“概览”页面。默认打开“线程列表”页面,如图1所示。“线程列表”列出当前分析的Java进程启动的线程名称和线程状态。线程可以是以下状态之一:Runnable、Waiting或Blocked。可通过线程搜索框和显示用法快速筛选数据。执行线程转储按钮可转储当前线程状态,便于后续页签分析展示。线程状在数据生成服务-...

随便推点

微信小程序获取openid(php)_西楚恶霸的博客-程序员宅基地_微信小程序php获取openid

小程序端wx.login 方法获取openid通过接口传到服务器//小程序登录 public function wxlogin(Request $request) { //此2个值是小程序后台提供 $appid = 'wxbf93676ffdb9a4d5'; $secret = "10fa9f759d3236de150875c30384d0db"; //小程序传过来的 $code = $request.

【关于Matlab中一些操作的记录】_wk_43245857的博客-程序员宅基地

关于Matlab中一些操作的记录0.目的001. matlab遍历结构体成员0.目的记录关于matlab实现某些功能的代码段。001. matlab遍历结构体成员s = struct('a',11,'b',222)fileds = fieldnames(s);for i=1:length(fileds) k = fileds(i); key = k{1}; value = s.(key); eval(['variable_',num2str(key) ' = '

java流的作用很大吗_深入理解 Java中的 流 (Stream)_weixin_34766614的博客-程序员宅基地

最近在看《Hadoop:The Definitive Guide》,对其分布式文件系统HDFS的Streaming data access不能理解。基于流的数据读写,太抽象了,什么叫基于流,什么是流?Hadoop是Java语言写的,所以想理解好Hadoop的Streaming Data Access,还得从Java流机制入手。流机制也是JAVA及C++中的一个重要的机制,通过流使我们能够自由地操作...

条码软件如何批量导入名称没有规律的图片_weixin_42622532的博客-程序员宅基地

目前在很多标签上都有这样或那样的图片,比如产品标签上的产品图片,工作证学生证等证件上面的证件照片,都需要准确无误的打印在相应的证件上,下面我们就来详细看一下图片名称没有规律的情况下如何批量导入图片: 首先,如果图片名称没有规律,我们可以提前保存一个包含图片名称的Excel或者TXT,本文我们将图片名称保存在Excel中,如下图: 一、新建标签...

使用faker生成随机的测试数据_weixin_34315189的博客-程序员宅基地

github地址转载于:https://www.cnblogs.com/sunshine21/p/10193068.html

QPixmap/QImage/QPicture_cc96610536的博客-程序员宅基地

QImage与Qpixmap的区别1、QPixmap主要是用于绘图,针对屏幕显示而最佳化设计,QImage主要是为图像I/O、图片访问和像素修改而设计的2、QPixmap依赖于所在的平台的绘图引擎,故例如反锯齿等一些效果在不同的平台上可能会有不同的显示效果,QImage使用Qt自身的绘图引擎,可在不同平台上具有相同的显示效果3、目前的Qt会把QPix

推荐文章

热门文章

相关标签