弹性布局当前应用的非常广泛,特别是移动端,记得第一次用reactNative 写代码的时候是最开始真正接触Flex布局。
1.首先最外层的容器需要指定为display:flex;由于flex的兼容版本还是没有那么高,需要在webkit的浏览器加上前缀-webkit.其次注意的是设为 Flex 布局以后,子元素的floatclearvertical-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布局-弹性布局的更多相关文章

  1. Flex box弹性布局 及 响应式前端设计的优化

    Flex box弹性布局 Flex box是CSS3新添加的一种模型属性,它的出现有力的打破了我们常常使用的浮动布局.实现垂直等高.水平均分.按比例划分,可以实现许多我们之前做不到的自适应布局.如果你 ...

  2. CSS3:布局display属性的flex(弹性布局)

    CSS3:布局display属性的flex(弹性布局) 一.简介 Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性.设为Flex布局以后, ...

  3. Flutter布局----弹性布局 (Flex)

    弹性布局(Flex) 弹性布局允许子组件按照一定比例来分配父容器空间.弹性布局的概念在其它UI系统中也都存在,如H5中的弹性盒子布局,Android中的FlexboxLayout等.Flutter中的 ...

  4. HTML-移动开发技巧 响应式布局 弹性布局

    移动开发常用技巧 [viewport基本知识] 设置布局viewpoint的各种信息 1.width=device-width;设置viewport视口宽度等于设备宽度 2.initial-scale ...

  5. css布局 弹性布局 和 网格布局

    这里就不写这两种布局的内容了 弹性布局链接:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 网格布局链接:https://www.ji ...

  6. flex (html弹性布局)

    flex是什么? 任何容器都可以指定为flex布局: .box{ display: flex;  /* 行内元素可以使用:inline-flex,webket内核浏览器必须 -webkit-flex ...

  7. Flex弹性布局在移动设备上的应用

    引文 首先,我们有表格布局.当不考虑语义并且利用一些适当的嵌套和其他技巧,我们可以用table建立具有一定功能的布局. 然后是现在大多数人都在使用的浮动布局.我们可以使用任何我们想用的元素,但浮动并不 ...

  8. flex布局(弹性布局)

    1. 传统布局与 flex 布局比较 传统布局 兼容性好 布局繁琐 局限性,不能在移动端很好的布局 flex 弹性布局 操作方便,布局极为简单,移动端应用很广泛 PC端浏览器支持较差 IE 11 或 ...

  9. 两点补充——CSS3新属性以及弹性布局

    CSS3 新属性 一.[ CSS3新增属性前缀 ] 1.-webkit-:chrome/safari 2.-moz-:火狐 3.-mo-:IE 4.-o-: Opera 欧朋 二 .[CSS 长度单位 ...

随机推荐

  1. AndroidStudio生成APK注意的几个问题

    生成APK遇到两个问题:一是生成的APK安装失败(没有勾选V1所致),二是生成APK后,百度与谷歌地图不显示(SHA1值改变所致). 通过Build>Generate Signed APK生成A ...

  2. python脚本练习之编译安装python

    练习 py-shelll #coding=utf-8 import os,sys if os.getuid() == 0: pass else: print('当前用户不是root,请以root用户执 ...

  3. VueJs第1天

    Vue.js是一个轻巧的.高性能.可组件化的MVVM库. Vue是一套用于构建用户界面的渐进式框架 渐进增强(progressive enhancement):针对低版本浏览器进行构建页面,保证最基本 ...

  4. continue #结束本次循环,继续下一次代码

    for i in range(10):     if i <5:         continue     print(i)     for j in range(10):         pr ...

  5. 解决Ubuntu无法通过ssh远程登录问题

    1.  安装 open ssh: sudo apt-get install ssh sudo apt-get install openssh-server 2. 编辑配置文件,允许以 root 用户通 ...

  6. HDU 1560 DNA sequence(DNA序列)

    HDU 1560 DNA sequence(DNA序列) Time Limit: 15000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K  ...

  7. 剑指offer:反转链表

    问题描述 输入一个链表,反转链表后,输出新链表的表头. c++代码 /* struct ListNode { int val; struct ListNode *next; ListNode(int ...

  8. python2.7安装

    下载地址:https://www.python.org/downloads/release/python-2716/ 尽量使用VPN,不然会很慢 安装后需要配置环境变量

  9. Windows 下 docker 部署 gitlab ci

    一.安装 1. 安装 docker Docker下载 注意:Windows 10 家庭版获取 之前的版本不能直接安装 Docker ,而是需要去安装 Docker Toolbox 我这里安装的是 Do ...

  10. 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 ...