flex布局-弹性布局
弹性布局当前应用的非常广泛,特别是移动端,记得第一次用reactNative 写代码的时候是最开始真正接触Flex布局。
1.首先最外层的容器需要指定为display:flex;由于flex的兼容版本还是没有那么高,需要在webkit的浏览器加上前缀-webkit.其次注意的是设为 Flex 布局以后,子元素的float
、clear
和vertical-align
属性将失效。
.box{
display: -webkit-flex; /* Safari */
display: flex;
}
2.其次Flex布局还有以下6个属性设置在容器上。
- flex-direction:决定主轴的方向
row
(默认值):主轴为水平方向,起点在左端。row-reverse
:主轴为水平方向,起点在右端。column
:主轴为垂直方向,起点在上沿。column-reverse
:主轴为垂直方向,起点在下沿。- flex-wrap:一条轴上加入放不下,是否考虑换行。
- nowrap 默认不换行
- wrap 换行,第一行在上方
- wrap-reverse; 换行,第一行在下方
- flex-flow:
flex-direction
属性和flex-wrap
属性的简写形式- 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
(默认值):轴线占满整个交叉轴。
flex布局-弹性布局的更多相关文章
- Flex box弹性布局 及 响应式前端设计的优化
Flex box弹性布局 Flex box是CSS3新添加的一种模型属性,它的出现有力的打破了我们常常使用的浮动布局.实现垂直等高.水平均分.按比例划分,可以实现许多我们之前做不到的自适应布局.如果你 ...
- CSS3:布局display属性的flex(弹性布局)
CSS3:布局display属性的flex(弹性布局) 一.简介 Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性.设为Flex布局以后, ...
- Flutter布局----弹性布局 (Flex)
弹性布局(Flex) 弹性布局允许子组件按照一定比例来分配父容器空间.弹性布局的概念在其它UI系统中也都存在,如H5中的弹性盒子布局,Android中的FlexboxLayout等.Flutter中的 ...
- HTML-移动开发技巧 响应式布局 弹性布局
移动开发常用技巧 [viewport基本知识] 设置布局viewpoint的各种信息 1.width=device-width;设置viewport视口宽度等于设备宽度 2.initial-scale ...
- css布局 弹性布局 和 网格布局
这里就不写这两种布局的内容了 弹性布局链接:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 网格布局链接:https://www.ji ...
- flex (html弹性布局)
flex是什么? 任何容器都可以指定为flex布局: .box{ display: flex; /* 行内元素可以使用:inline-flex,webket内核浏览器必须 -webkit-flex ...
- Flex弹性布局在移动设备上的应用
引文 首先,我们有表格布局.当不考虑语义并且利用一些适当的嵌套和其他技巧,我们可以用table建立具有一定功能的布局. 然后是现在大多数人都在使用的浮动布局.我们可以使用任何我们想用的元素,但浮动并不 ...
- flex布局(弹性布局)
1. 传统布局与 flex 布局比较 传统布局 兼容性好 布局繁琐 局限性,不能在移动端很好的布局 flex 弹性布局 操作方便,布局极为简单,移动端应用很广泛 PC端浏览器支持较差 IE 11 或 ...
- 两点补充——CSS3新属性以及弹性布局
CSS3 新属性 一.[ CSS3新增属性前缀 ] 1.-webkit-:chrome/safari 2.-moz-:火狐 3.-mo-:IE 4.-o-: Opera 欧朋 二 .[CSS 长度单位 ...
随机推荐
- AndroidStudio生成APK注意的几个问题
生成APK遇到两个问题:一是生成的APK安装失败(没有勾选V1所致),二是生成APK后,百度与谷歌地图不显示(SHA1值改变所致). 通过Build>Generate Signed APK生成A ...
- python脚本练习之编译安装python
练习 py-shelll #coding=utf-8 import os,sys if os.getuid() == 0: pass else: print('当前用户不是root,请以root用户执 ...
- VueJs第1天
Vue.js是一个轻巧的.高性能.可组件化的MVVM库. Vue是一套用于构建用户界面的渐进式框架 渐进增强(progressive enhancement):针对低版本浏览器进行构建页面,保证最基本 ...
- continue #结束本次循环,继续下一次代码
for i in range(10): if i <5: continue print(i) for j in range(10): pr ...
- 解决Ubuntu无法通过ssh远程登录问题
1. 安装 open ssh: sudo apt-get install ssh sudo apt-get install openssh-server 2. 编辑配置文件,允许以 root 用户通 ...
- HDU 1560 DNA sequence(DNA序列)
HDU 1560 DNA sequence(DNA序列) Time Limit: 15000/5000 MS (Java/Others) Memory Limit: 32768/32768 K ...
- 剑指offer:反转链表
问题描述 输入一个链表,反转链表后,输出新链表的表头. c++代码 /* struct ListNode { int val; struct ListNode *next; ListNode(int ...
- python2.7安装
下载地址:https://www.python.org/downloads/release/python-2716/ 尽量使用VPN,不然会很慢 安装后需要配置环境变量
- Windows 下 docker 部署 gitlab ci
一.安装 1. 安装 docker Docker下载 注意:Windows 10 家庭版获取 之前的版本不能直接安装 Docker ,而是需要去安装 Docker Toolbox 我这里安装的是 Do ...
- Exception in thread "main" SettingsException[Failed to load settings from [elasticsearch.yml]]; nested: ElasticsearchParseException[malformed, expected end of settings but encountered additional conte
D:\elasticsearch\elasticsearch-2.4.0\bin>elasticsearchException in thread "main" Settin ...