对于flex布局的使用心得
弹性盒子flex:
对于客户端的布局非常有用,不管是平均分配space-around这个属性还是两端对齐space-betwee在页面布局的时候都会有很好的表现。
对于部分内容区域中,具有很多大致内容相同的几个区块的布局都可以使用到它,将父级设置为display:flex;父级就会变成容器,子级就会变成项目,项目默认是在一行显示,如果项目的宽度总和大于父级的总和了,子级就会缩放在一行显示。
因此换行是需要自己设置的。我平时划分的区块是比较细的,因此用到换行的情况是内容相似而且比较多的。
换行的书写方式为:flex-wrap:wrap 默认值为nowrap。
当换行过后交叉轴就会变成多根,在一根交叉轴的对齐方式使用的是align-items,当使用了换行过后对应的交叉轴对齐方式属性应当书写为align-content。
在使用中遇到一个难以解决的问题,想做一个骰子五的样式,但是中间那个区块没法下去,代码如下:
html中代码如下:
对于flex布局的使用心得的更多相关文章
- Flex 布局教程:语法篇
作者: 阮一峰 网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便 ...
- Flex 布局教程:实例篇
该教程整理自 阮一峰Flexible教程 今天介绍常见布局的Flex写法.你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我的主要参考资料是Landon Schropp的文章和Solved ...
- 在移动端中的flex布局
flex布局介绍: flex布局很灵活, 这种布局我们也可以称之为弹性布局, 弹性布局的主要优势就是元素的宽或者高会自动补全; flex布局实例: 比如有两个div,一个div的宽度为100px, ...
- css flex布局
关于flex布局的一些简单用法 效果(下图) 实现代码: <!--html--> <div class="wrap"> <div class=&quo ...
- FLEX布局的一些问题和解决方法
前言 露珠最近研究了一下flex的布局方式,发现项w3c推出的这套布局解决方案对于日益复杂的前端开发布局来说是确实是一利器,并且在不同的屏幕上实现了真正的响应式布局:不再单纯地依赖百分比和float的 ...
- CSS之flex布局
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- flex布局示例
来自:授权地址 作者:水牛01248 几个横排元素在竖直方向上居中 display: flex; flex-direction: row;//横向排列 align-items: center;//垂直 ...
- 【转】Flex 布局语法教程
网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中 ...
- [flex布局]-flex教程
简介:2009年,W3C提出了一种新的方案----Flex布局,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能. Flex布局是什 ...
随机推荐
- [linux]测硬盘读写速度、内存读写速度
测硬盘的读写速度可以用以下命令:dd if=/dev/zero of=file bs=1M count=1024 测内存读写速度可以使用以下命令: dd if=/dev/zero of=/dev/nu ...
- 让ie10/11支持非单页面的vue/es6
为了满足某些客户的要求,最近让前端同学实现了ie 10(windows 7)/11(windows 10)支持多页面的vue/es6,基本参考如下: https://www.cnblogs.com/n ...
- eclispe: 修改所有文件默认编码为UTF-8
1.修改 workspace text file encoding 依次点击windows -> Preferences -> general -> Workspace,修改如图的编 ...
- java判断文件真实类型
代码如下: import java.io.FileInputStream; import java.io.IOException; import java.util.HashMap; /** * &l ...
- layui弹出层layer的area过大被遮挡
layer弹出窗口在弹出时指定了area,弹出后,如果当前页面(iframe)大小比弹出的窗口小,那么就会出现无法操作弹出窗口的尴尬情况.如图: 弹出窗口比当前页面大,这时,唯有放大整个页面才能看到 ...
- 搭建Portainer可视化界面(转)
转载地址:https://blog.csdn.net/u011781521/article/details/80469804 一.什么是Portainer? Portainer是Docker的图形化管 ...
- matlab学习笔记13_1 函数返回值
一起来学matlab-matlab学习笔记13函数 13_1 函数返回值 觉得有用的话,欢迎一起讨论相互学习~Follow Me 参考文献 https://blog.csdn.net/qq_36556 ...
- 人脸识别(基于ArcFace)
我们先来看看效果 上面是根据图片检测出其中的人脸.每个人脸的年龄还有性别,非常强大 第一步: 登录https://ai.arcsoft.com.cn/,注册开发者账号,身份认证,注册应用,得到APPI ...
- LwIP应用开发笔记之三:LwIP无操作系统UDP客户端
前一节我们实现了基于RAW API的UDP服务器,在接下来,我们进一步利用RAW API实现UDP客户端. 1.UDP协议简述 UDP协议全称是用户数据报协议,在网络中它与TCP协议一样用于处理数据包 ...
- 大数据 -- Cloudera Manager(简称CM)+CDH构建大数据平台
一.Cloudera Manager介绍 Cloudera Manager(简称CM)是Cloudera公司开发的一款大数据集群安装部署利器,这款利器具有集群自动化安装.中心化管理.集群监控.报警等功 ...