1.父元素 属性

display:flex; // 必写

justify-content: XXX; // 设置子容器沿主轴排列

align-items: XXX; // 设置子容器如何沿交叉轴排列

flex-direction: XXX; // 决定主轴的方向,交叉轴的方向由主轴确定。

flex-wrap: XXX; // 设置换行方式

align-content: XXX; // 多行沿交叉轴对齐

2.子元素 属性

flex: XXX; //必写 在主轴上如何伸缩

align-self: XXX; // 单独设置子容器如何沿交叉轴排列

flex-basis: XXX; // 设置基准大小

flex-grow: XXX; // 设置扩展比例

flex-shrink: XXX; // 设置收缩比例

order: XXX; // 设置排列顺序

.

flex布局 (回顾)的更多相关文章

  1. flex布局——回顾

    flex 即为弹性布局. 任何一个容器都可以指定为flex布局. .box{display:flex} 行内元素可以使用flex布局 .box{display: inline-flex} webkit ...

  2. 前端知识点回顾之重点篇——CSS中flex布局

    flex布局 来源: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool 采用 Flex 布局的元素 ...

  3. flex布局总结回顾

    1.背景 传统css盒式模型,依赖 display属性 + position属性 + float属性实现页面的布局,而随着互联网的迅猛发展,带动了无数的互联网创业者和互联网产品,因而样式布局的美化成为 ...

  4. flex布局应用于踩坑

    一.预告 本文不是一篇入门的文章所有请符合以下条件的战斗人员绕道: 1.初学前端,对前端的传统布局还不是很熟悉的人 2.后端人员对前端不打算深入学习的同学 二.开篇 flex布局原本是好几个月前就一直 ...

  5. CSS 学习笔记 - Flex 布局

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

  6. 2017年总结的前端文章——一劳永逸的搞定 flex 布局

    flex 基本概念 使用 flex 布局首先要设置父容器 display: flex,然后再设置 justify-content: center 实现水平居中,最后设置 align-items: ce ...

  7. Flex 项目属性:flex 布局示例

    flex属性: flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto.后两个属性可选. 该属性有两个快捷值:auto (1 1 auto ...

  8. flex布局应用与踩坑

    一.预告 本文不是一篇入门的文章所有请符合以下条件的战斗人员绕道: 1.初学前端,对前端的传统布局还不是很熟悉的人 2.后端人员对前端不打算深入学习的同学 二.开篇 flex布局原本是好几个月前就一直 ...

  9. 一劳永逸的搞定 FLEX 布局(转)

    一劳永逸的搞定 flex 布局 寻根溯源话布局 一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平.垂直同时居中.记得刚开始学习 CSS 的时候,看到 float 属性不由得感觉眼前一亮, ...

随机推荐

  1. windows实时监测热插拔设备的变化2

    //动态监测设备插拔 #include <Dbt.h> BEGIN_MESSAGE_MAP(ParticipateMeeting, CDialogEx) ON_WM_DEVICECHANG ...

  2. 1.2.3 创建Cocos2D-iPhone的帮助文档

    http://book.51cto.com/art/201303/383957.htm <Cocos2D权威指南>第1章开始前的准备工作,本章我们将介绍什么是Cocos2D以及有关Coco ...

  3. V++ MFC CEdit输出数组 UNICODE TO ASCII码

    MFC怎么在静态编辑框中输出数组 //字符转ASCII码void CUTF8Dlg::OnBnClickedButtonCharAscii(){ // TODO: 在此添加控件通知处理程序代码 Upd ...

  4. 28.Implement strStr()---kmp

    题目链接:https://leetcode.com/problems/implement-strstr/description/ 题目大意:字符串匹配,从字符串中,找到给定字符串第一次出现的位置下标, ...

  5. 使用两个 Windows 窗体 DataGridView 控件创建一个主/从窗体

    使用 DataGridView 控件的一种最常见方案是“主/详细信息”窗体,这样的窗体可显示两个数据库表之间的父/子关系.如果选择主表中的行,将导致以相应的子数据来更新详细信息表. 主/详细信息窗体很 ...

  6. 厦门海沧区磁盘只有1TB的解决方案

    厦门海沧区磁盘只有1TB的解决方案 1.为WINDOWS 2008 r2 服务器增加5个1T的硬盘 2.打开命令提示符,并键入 diskpart. 3.在“DISKPART”提示符下,键入 list ...

  7. Spring:特殊数据类型的属性注入(基于配置文件)

    该处提到的特殊数据类型指的是除了基础数据类型和String以外的其他常用的数据类型,如:List.Map.Set.以及pojo对象等.则我们创建的Person类定义为: package bjtu.we ...

  8. 中矿大新生赛 G 甄总搬石头【优先队列/哈夫曼/贪心】

    时间限制:C/C++ 1秒,其他语言2秒空间限制:C/C++ 32768K,其他语言65536K64bit IO Format: %lld 题目描述 https://www.nowcoder.com/ ...

  9. "科林明伦杯"哈尔滨理工大学第八届程序设计竞赛 题解

    题目链接  Problems Problem A 快速幂累加即可. #include <cstdio> #include <cstring> #include <iost ...

  10. sqlserver日志文件缩小

    原文:sqlserver日志文件缩小        最近装了个500g的固态硬盘,导入我原来的数据库后发现有60多个G的内存不见了, 最后发现我的某个数据库有60多个G的日志文件(.ldf文件)文件, ...