Flex是Flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性。
设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。使用flex 布局，给父容器设置display: flex，然后再设置justify-content: center可以实现水平居中，设置 align-items: center可以实现垂直居中。

flex的核心的概念就是容器和轴。容器包括外层的父容器和内层的子容器，轴包括主轴和交叉轴。

一、容器和轴

二、父容器的属性

三、子容器的属性

四、我的demo

https://codepen.io/camille666/pen/VMrPaX

https://codepen.io/camille666/pen/pWdeNr

https://codepen.io/camille666/pen/jGaBoz

https://codepen.io/camille666/pen/aLVWjN

https://codepen.io/camille666/pen/yzPbdB

网页布局之flex的更多相关文章

  1. 【css3网页布局】flex盒子模型

    1.0 前言 网页布局(layout)是CSS的一个重点应用. 经典布局类型: 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊 ...

  2. 浅谈新的布局方式-flex

    引言: 网页布局在flex出来之前,是由盒模型为底子,float,position,table,百分比来进行布局的,重绘的比较多,影响性能,复杂又不好维护.flex布局,可以简便.完整.响应式地实现各 ...

  3. 弹性盒布局display:flex详解

    一:弹性盒子 随着响应式设计的流行,网站开发者在设计网页布局时往往要考虑到页面在适配不同分辨率的浏览器时其内部组件位置大小都会产生变化,因此需要设计者根据窗口尺寸来调整布局,从而改变组件的尺寸和位置, ...

  4. 简单实用的CSS网页布局中文排版技巧

    由于汉字的特殊性,在css网页布局中,中文排版有别于英文排版.排版是一个麻烦的问题,小编认为,作为一个优秀的网页设计师和网页制作人员,掌握一些简单的中文排版技巧是不可或缺的,所以今天特意总结了几个简单 ...

  5. 网页布局之grid

    学习网格布局时,你可能会在网络上看到很多文章,内容不同,属性不同,真是让人摸不着头脑,到底哪个才是正确的?看了本篇文章,我想你会豁然开朗.比如,一会儿用grid-rows,一会儿用grid-defin ...

  6. css3弹性伸缩布局(一)—————flex布局

    CSS3弹性伸缩布局简介 2009年,W3C提出了一种崭新的方案—-Flex布局(即弹性伸缩布局),它可以简便.完整.响应式地实现各种页面布局,包括一直让人很头疼的垂直水平居中也变得很简单地就迎刃而解 ...

  7. Web开发系列【1】实用的网页布局（PC端）

    在熟悉那些常用的软件.工具后,我们正式开始开发,在前期准备工作之后,我们要做的事情是写页面,也就是网页布局.在w3c.菜鸟.慕课网等等网站上都有基础的 HTML+CSS 知识讲解,在初期学习中,跟着教 ...

  8. cdispaly的Grid布局与Flex布局

    cdispaly的Grid布局与Flex布局 Gird 布局与 Flex 布局有一定的相似性,都是对容器的内部项目进行划分. Flex 布局是轴线布局,只能指定项目针对轴线的位置,可以看作成一维布局 ...

  9. vivo前端智能化实践：机器学习在自动网页布局中的应用

    作者:vivo 互联网前端团队- Su Ning 在设计稿转网页中运用基于self-attention机制设计的机器学习模型进行设计稿的布局,能够结合dom节点的上下文得出合理的方案. 一.背景 切图 ...

随机推荐

  1. luoguP4705 玩游戏

    好好玩 即对于k∈[1,t] 求(ax+by)^k 以下图片均来自于: 在Ta的博客查看 一 二项式展开: 设: 那么: 可以卷积了 二 求: (PS:随机序列的0~k次方和,这是一个经典问题.) 我 ...

  2. sea.js简单使用教程

    sea.js简单使用教程 下载sea.js, 并引入 官网: http://seajs.org/ github : https://github.com/seajs/seajs 将sea.js导入项目 ...

  3. 清除Windows访问共享时保存的凭据记录

    场景:某些时候我们连接了某台PC或服务器的共享目录或打印机,但因为一些原因突然连接不上了(或是对方组策略发生变化,或是对方计算机用户密码变更 等等..) 又或者电脑给其它用户使用,因一些安全问题需要临 ...

  4. 在vue中引入scss

    先npm安装stylus和stylus-loader  (我安装后,报错提示缺少stylus,所以第一步安装stylus,如果没有提示可省略第一步) 1.到 package.json ----- de ...

  5. C# RabbitMQ

    鉴于本人很懒,发现好的文章一般都直接copy,本文大体摘自:https://www.cnblogs.com/MuNet/p/8546192.html 1.引言 RabbitMQ——Rabbit Mes ...

  6. vue封装axios方法推荐)

    目录结构: api.js export default { myTopic: '/api/subscribe-data/post/cat' } request.js import axios from ...

  7. 线程的start方法和run方法的区别

    run方法及结果 public class MyThread extends Thread { @Override public void run() { System.out.println(&qu ...

  8. maven 一些整理

    1.发布jar包到私服,需要进入项目目录 发布jar   :mvn deploy 发布源码 :mvn source:jar deploy,这个需要依赖一个maven插件: <plugin> ...

  9. TCP/IP（五）传输层之细说TCP的三次握手和四次挥手

    前言 这一篇我将介绍的是大家面试经常被会问到的,三次握手四次挥手的过程.以前我听到这个是什么意思呀?听的我一脸蒙逼,但是学习之后就原来就那么回事! 一.运输层概述 1.1.运输层简介 这一层的功能也挺 ...

  10. 微信小程序 Button控件 点击传值给JavaScript

    直接看例子吧: WXML:直接看Button,用“data-”(data-total)传值,后台如何获取,继续看下面JS代码. <view class="infothird" ...