弹性盒子flex:

对于客户端的布局非常有用,不管是平均分配space-around这个属性还是两端对齐space-betwee在页面布局的时候都会有很好的表现。

对于部分内容区域中,具有很多大致内容相同的几个区块的布局都可以使用到它,将父级设置为display:flex;父级就会变成容器,子级就会变成项目,项目默认是在一行显示,如果项目的宽度总和大于父级的总和了,子级就会缩放在一行显示。

因此换行是需要自己设置的。我平时划分的区块是比较细的,因此用到换行的情况是内容相似而且比较多的。

换行的书写方式为:flex-wrap:wrap  默认值为nowrap。

当换行过后交叉轴就会变成多根,在一根交叉轴的对齐方式使用的是align-items,当使用了换行过后对应的交叉轴对齐方式属性应当书写为align-content。

在使用中遇到一个难以解决的问题,想做一个骰子五的样式,但是中间那个区块没法下去,代码如下:

html中代码如下:

<div class="father">
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
<div class="fourth"></div>
<div class="fifth"></div>
</div>
css中代码如下:
.father {
height: 320px;
width: 320px;
margin: 0 auto;
display: flex;
box-sizing: border-box;
border: solid 1px red;
justify-content: space-between;
flex-wrap: wrap;
align-content: space-between;
}
每个盒子我给了一个背景颜色,因为代码都是重复的就不写了。
.father>div {
width: 100px;
height: 100px;
}
.second {
align-self: center !important;
}
此问题我无法解决,但是因为平时的开发中也用不到这样的布局因此也没有特别去纠结。
对于属性flex-direction,可以改变主轴的对齐方式,可以从左到右,从右到左,也可以从上到下,从下到上。根据自己的需求也是挺好用的。
flex-direction与flex-wrap可以简写为flex-flow:既可以设置换行也可以设置主轴的对齐方式,可以写单个值也可以两个值一起写。
综上所述在之前的开发当中因为float浮动的使用非常麻烦因为每次设置了浮动过后都要清浮动,否则的话浮动元素不会计入常规流的计算,那么在下方的常规流内容区块就会往上顶,所以就非常的麻烦,因此flex的布局就体现出了非常方便的优点,比如我想让内容去正中间只需要两条语句即可,也不需要一点一点的调margin。
 

对于flex布局的使用心得的更多相关文章

  1. Flex 布局教程:语法篇

    作者: 阮一峰 网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便 ...

  2. Flex 布局教程:实例篇

    该教程整理自 阮一峰Flexible教程 今天介绍常见布局的Flex写法.你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我的主要参考资料是Landon Schropp的文章和Solved ...

  3. 在移动端中的flex布局

    flex布局介绍: flex布局很灵活, 这种布局我们也可以称之为弹性布局,  弹性布局的主要优势就是元素的宽或者高会自动补全; flex布局实例: 比如有两个div,一个div的宽度为100px, ...

  4. css flex布局

    关于flex布局的一些简单用法 效果(下图) 实现代码: <!--html--> <div class="wrap"> <div class=&quo ...

  5. FLEX布局的一些问题和解决方法

    前言 露珠最近研究了一下flex的布局方式,发现项w3c推出的这套布局解决方案对于日益复杂的前端开发布局来说是确实是一利器,并且在不同的屏幕上实现了真正的响应式布局:不再单纯地依赖百分比和float的 ...

  6. CSS之flex布局

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  7. flex布局示例

    来自:授权地址 作者:水牛01248 几个横排元素在竖直方向上居中 display: flex; flex-direction: row;//横向排列 align-items: center;//垂直 ...

  8. 【转】Flex 布局语法教程

    网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中 ...

  9. [flex布局]-flex教程

    简介:2009年,W3C提出了一种新的方案----Flex布局,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能. Flex布局是什 ...

随机推荐

  1. TOKEN验证防止CSRF攻击的原理

    TOKEN验证防止CSRF攻击的原理.CSRF中文名是跨站请求伪造攻击,黑客可以通过CSRF攻击来伪造我们的身份,从而进行不法的活动.比如说是以我们的身份进行转账,发送邮件等操作. 要想做到预防CSR ...

  2. 解决在SQLPLUS中无法使用方向键、退格键问题

    1. wget ftp://ftp.pbone.net/mirror/ftp5.gwdg.de/pub/opensuse/repositories/home:/matthewdva:/build:/E ...

  3. GIT删除本地tag和远程tag

    以tag test为例,这个tag已经同步到远程,但是现在发现了一个问题,需要撤回该tag,git命令如下: 删除本地tag: git tag -d test 删除远程tag: git push or ...

  4. mac环境更新node版本

    执行命令: 清除node的cache(清除node的缓存) sudo npm cache clean -f 安装"n"版本管理工具,管理node(没有错,就是n) sudo npm ...

  5. phpspreadsheet 中文文档(四) 创建电子表格+档案格式

    2019年10月11日14:01:48 该Spreadsheet班 该Spreadsheet班是PhpSpreadsheet的核心.它包含对所包含工作表,文档安全性设置和文档元数据的引用. 为了简化P ...

  6. XGBoost中参数调整的完整指南(包含Python中的代码)

    (搬运)XGBoost中参数调整的完整指南(包含Python中的代码) AARSHAY JAIN, 2016年3月1日     介绍 如果事情不适合预测建模,请使用XGboost.XGBoost算法已 ...

  7. ASP.NET-------GridView中的字段居中不了

    在使用Grid View 控件的时候,回合一些css 放在一块使用之后你会发现  字段没有居中 你会发现该什么都不行 比如: HeaderStyle-HorizontalAlign="Cen ...

  8. [转帖](区块链补习班)ERC20很多人都听过,但ERC是什么你真的了解吗?

    (区块链补习班)ERC20很多人都听过,但ERC是什么你真的了解吗? http://baijiahao.baidu.com/s?id=1600948969290990883&wfr=spide ...

  9. [Linux] 树莓派 4B 安装 Ubuntu 19.10 (Eoan Ermine) IOT 版

    硬件:Raspberry Pi 4B系统:Ubuntu 19.10 (Eoan Ermine) for IOT官网:https://ubuntu.com/download/iot/raspberry- ...

  10. Linux下Ngnix的安装与配置

    由于我的博客项目在8084端口,需要Nginx来转发一下端口,记录一下安装过程和踩过的小坑. 一.下载 wget http://nginx.org/download/nginx-1.12.2.tar. ...