弹性盒子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. MyBatis(八):Mybatis Java API枚举类型转化的用法

    最近工作中用到了mybatis的Java API方式进行开发,顺便也整理下该功能的用法,接下来会针对基本部分进行学习: 1)Java API处理一对多.多对一的用法: 2)增.删.改.查的用法: 3) ...

  2. 如何在 Apache Hive 中解析 Json 数组

    我们都知道,Hive 内部提供了大量的内置函数用于处理各种类型的需求,参见官方文档:Hive Operators and User-Defined Functions (UDFs).我们从这些内置的 ...

  3. 配置IDEA项目JDK环境

    打开IDEA,然后点击[Configure]->[Project Defaults]->[Project Structure],如下图:  然后左侧点击树形菜单的[Project Sett ...

  4. C#-DllImport 路径问题

    原文:C# DllImport 相对路径无法找到dll DllImport DLL查找顺序:1.应用程序所在目录2.Windows目录和Windows\System32目录3.环境变量目录 只需要你把 ...

  5. apache Request-URI Too Large 处理办法

    在Apache的httpd.conf配置文件中(直接加就可以) LimitRequestLine 40940 LimitRequestFieldSize 40940

  6. SNF快速开发平台2020版

    SNF快速开发平台分如下子平台: 1.CS快速开发平台 2.BS快速开发平台 3.H5移动端快速开发平台 4.软件开发机器人平台 配置型开发零编程 SNF快速开发平台是一个比较成熟的.net领域的商业 ...

  7. mysql时间和本地时间相差13个小时的问题

    首先需要查看mysql的当前时区,用time_zone参数 mysql> show variables like '%time_zone%'; +------------------+----- ...

  8. Python3基础 print %xX 十六进制大小写

             Python : 3.7.3          OS : Ubuntu 18.04.2 LTS         IDE : pycharm-community-2019.1.3    ...

  9. linux驱动开发学习二:创建一个阻塞型的字符设备

    在Linux 驱动程序中,可以使用等待队列来实现阻塞进程的唤醒.等待队列的头部定义如下,是一个双向列表. struct list_head { struct list_head *next, *pre ...

  10. VUE 同一页面路由参数变化,视图不刷新的解决方案

    1.监听路由处理 watch: { $route(to, from) { // 逻辑 // 重新调用数据接口 } }, 2.beforeRouteUpdate导航守卫 路由更新时触发 beforeRo ...