前言:这个网站详细讲了水平、垂直、水平垂直的css方法。https://css-tricks.com/centering-css-complete-guide/

布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。2009年,W3C提出了一种新的方案—-Flex布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。

Flex 布局是什么

Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。注意,设为 Flex 布局以后,子元素的floatclearvertical-align属性将失效。

采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称"项目"。

容器的属性

  • flex-direction      值有四个:row | row-reverse | column | column-reverse;
  • flex-wrap            值有3个:nowrap | wrap | wrap-reverse;
  • flex-flow              flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap,
  • justify-content      值有5个:flex-start | flex-end | center | space-between | space-around;
  • align-items           值有5个:flex-start | flex-end | center | baseline | stretch;
  • align-content

项目的属性

  • order        属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。
  • flex-grow    属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。
  • flex-shrink  属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。负值对该属性无效。
  • flex-basis
  • flex         属性是flex-growflex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。
  • align-self

布局实例参考阮一峰:http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

今天学习了flex布局的更多相关文章

  1. CSS 学习笔记 - Flex 布局

    传统布局方式的局限性 传统的网页布局方式,采用 display + position + float 的方式来实现.这种方式,无法实现一些复杂的布局,并且在实现某些布局时,会有一些局限性. 比如,最常 ...

  2. HTML学习之Flex 布局

    一.Flex 布局是什么? Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为 Flex 布局. .box ...

  3. 学习整理--flex布局(1)

    父元素容器属性 flex-direction: row(默认).row-reverse.column.column-reverse row: 横向正序排列子元素 colimn: 竖向正序排列子元素 r ...

  4. flex布局元素操作详情

    之前布局一直用的是 position,float之类的,趁着国庆学习一下 flex 布局 父元素: flex-direction: row row-reverse column column-reve ...

  5. display:flex 布局详解(2)

    1.  flex设置元素垂直居中对齐 在之前的一篇文章中记载过如何垂直居中对齐,方法有很多,但是在学习了flex布局之后,垂直居中更加容易实现 HTML代码: <div class=" ...

  6. 只需5分钟!一文读懂CSS布局(二) -- flex布局

    目录 简介 基本概念 容器属性 1. flex-direction 测试代码 2. flex-wrap 3. flex-flow 4. justify-content 5. align-items 6 ...

  7. 对Flex布局的总结与思考

    阅读本文之前最好对flex布局有基本了解,可以通过"参考资料"中列举的资源来学习. flex布局规范的设计目标 一维布局模型(one-dimensional layout mode ...

  8. 【前端】移动端Web开发学习笔记【2】 & flex布局

    上一篇:移动端Web开发学习笔记[1] meta标签 width设置的是layout viewport 的宽度 initial-scale=1.0 自带 width=device-width 最佳实践 ...

  9. Flex布局【弹性布局】学习

    先让我们看看在原来的学习中遇到的问题 之前在软件工程的大作业中,自己从零开始学习如何开发一个网站,从页面,到后台,当然数据库是大二的必修课 在学习如何编写一个静态页面的时候,完全是自学,自己摸索,所以 ...

随机推荐

  1. 基于TensorFlow的深度学习系列教程 2——常量Constant

    前面介绍过了Tensorflow的基本概念,比如如何使用tensorboard查看计算图.本篇则着重介绍和整理下Constant相关的内容. 基于TensorFlow的深度学习系列教程 1--Hell ...

  2. 一个xss漏洞到内网漫游【送多年心血打造的大礼包啦!】

    i春秋作家:jasonx 原文来自:一个xss漏洞到内网漫游[送多年心血打造的大礼包啦!] 前言 渗透过程中,有时候遇某些网站,明明检测到有xss漏洞,但是盲打以后,收到的cookie还是不能登录后台 ...

  3. 程序员工作 996 生病 ICU ?

    阅读本文大概需要 2 分钟. 说实话,一般平时这个点我已经睡着了,今天准备好的文章也会准时在凌晨推送给大家.睡前看篇关于强制 996 加班的消息,里面有句口号还挺溜,上班996,下班ICU,为此还特意 ...

  4. .net core 发布linux报错“The configured user limit (128) on the number of inotify instances has been reached”

    https://stackoverflow.com/questions/45875981/error-while-reading-json-file-in-dotnet-core-the-config ...

  5. 微信小程序信息展示列表

    微信小程序信息展示列表 效果展示: 代码展示: wxml <view class="head"> <view class="head_item" ...

  6. 树莓派配置wifi链接

    使用树莓派链接网络是必然的,这里讲一讲如何连接到wifi. 扫描WIFI sudo iwlist wlan0 scan 扫描后得到以下结果 这里的“ESSID”是无线网的名称. 添加有密码的WIFI网 ...

  7. 解决 Chrome 下载不了东西 失败 - 已屏蔽 的问题

    或许你怎么也想不到是IE的问题 由于IE的安全设定问题 但是这个锅 确实不应该是IE来背. 因为我IE下载都没出现这个问题. 解决方法是这样的: IE>Internet选项>安全>自 ...

  8. mysql 开发进阶篇系列 46 物理备份与恢复( xtrabackup的 选项说明,增加备份用户,完全备份案例)

    一. xtrabackup 选项说明 在操作xtrabackup备份与恢复之前,先看下该工具的选项,下面记录了xtrabackup二进制文件的部分命令行选项,后期把常用的选项在补上.点击查看xtrab ...

  9. 用javascript写原生ajax(笔记)

    AJAX  的全名叫做  Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并 ...

  10. 提升 PLSQL 开发性能漫谈

    本文内容摘自<剑破冰山--Oracle开发艺术>一书,有删改. 1.触发器尽量考虑内部代码过程封装(解析次数) 2.避免动态 SQL 动态 SQL 和普通 SQL 在执行过程中最大的差别在 ...