grid和flex布局

grid

整个单元格

grid-template-columns: 1fr 2fr 1fr

将元素的列，按照1比2比1排列

grid-template-rows: 100px 100px 100px

将元素的行，按照100px 100px 100px排列

grid-auto-flow: column

将所有元素按照纵向排列

justify-items: start/center/end/stretch

将所有元素，在每个单元格的起始列位置/居中列位置/结束列位置/延伸

align-items: start/center/end/stretch

将所有元素，在每个单元格的起始行位置/居中行位置/结束行位置/延伸

justify-content: start/center/end

将整个单元格的位置在整个容器中的列的位置

align-content: start/center/end

将整个单元格的位置在整个容器中的行的位置

grid-auto-rows: 50px

元素溢出后的行的尺寸

grid-auto-columns: 50px

元素溢出后的列的尺寸

单独单元格的属性

grid-column-start: 1

第一根列线开始

grid-column-end: 3

第三根列线结束

上面两个可以省写grid-column: 1/3

grid-row-start: 1

第一根列线开始

grid-row-end: 3

第三根列线结束

上面两个可以省写grid-row: 1/3

justify-self: start/center/end

该单元格的位置在整个容器中的列的位置

align-self: start/center/end

该单元格的位置在整个容器中的行的位置

flex布局

整体容器

默认情况下，如果单元素没有设置宽高度，flex布局会让单元素撑满flex的容器，并主轴默认横向排列

flex-direction: row/row-reverse/column/column-reverse

主轴是横向，起点在左端/右端/主轴是纵向，起点在上沿/下沿

justify-content: start/end/center/space-between/space-around

整体内容左对齐/右对齐/居中/两端对齐且项目间隔相等/项目左右有间隔且相等

align-items: flex-start/flex-end/center/stretch

另一条轴的起点对齐/终点对齐/中点对齐/延伸适应整个容器的高度（默认值）

单元素的项目

flex-grow: 1/0默认

单元素在整体布局的占比

flex-shrink: 2/1默认

默认情况下，单元素总的宽高不会超过flex布局，而flex-shrink会缩小倍数

flex-basis: 300px/auto默认

主轴的宽度和另一个轴的高度

flex: 0 1 auto

flex是flex-grow和flex-shrink和flex-basis的综合样式

align-self: auto/flex-start/flex-end/center/baseline/stretch

flex单元素项目的对齐方式

gird和flex布局相关推荐

【CSS布局】gird布局和flex布局
今天主要回顾一下CSS布局相关的问题 CSS CSS 是用来指定文档如何展示给用户的一门语言--如网页的样式.布局.等等. CSS布局正常布局流正常布局流 (normal flow) 是指在不对页 ...
Flex布局完全教程
背景介绍 Flexbox 布局(也叫Flex布局,弹性盒子布局)模块目标在于提供一个更有效地布局.对齐方式,并且能够使父元素在子元素的大小未知或动态变化情况下仍然能够分配好子元素之间的间隙. Flex ...
Flex 布局详解 - 转自阮一峰老师
Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性.任何的盒子都可以使用它. 下面我们来看一下使用 Flex 布局的容器的属性 fle ...
Flex布局教程（来源：阮一峰）
网页布局(layout)是 CSS 的一个重点应用.Flex 布局将成为未来布局的首选方案.本文介绍它的语法,下一篇文章给出常见布局的 Flex 写法.网友 JailBreak 为本文的所有示例制作了 ...
Flex 布局：语法篇
2019独角兽企业重金招聘Python工程师标准>>> 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position 属性 + float 属性.它对于那些特殊 ...
通过游戏来学习CSS的Flex布局
在复习Flex 布局的时候发现的了几个有趣的小游戏,在这里分享并记录几个有难度的答案 1. Flexbox Froggy 通过调整CSS样式来使各种青蛙回到对应的荷叶上,游戏默认难度为Beginner ...
CSS布局之flex布局
最近项目中涉及到手机端开发,那么flex布局是必不可少的,这里我来重新梳理一下 1. 介绍 flex布局也被成为伸缩盒布局,在flex布局模型中,flex容器的子元素可以在x轴或y轴上进行布局,并且子 ...
flex布局和单行省略不兼容
2019独角兽企业重金招聘Python工程师标准>>> flex布局和单行省略不兼容,存在着无法公用的特性,可以将flex修改为: display: box; display: -w ...
flex布局的盒子模型
flex盒子模型由容器(flex container)以及容器的直接子元素(flex item)组成. 以容器(flex container)定义,有主轴(main axis)以及交叉轴(cross ...
浅谈CSS3中display属性的Flex布局，关于登陆页面属性框的设置
声明:本文转发自三里屯柯南的浅谈CSS3中display属性的Flex布局http://www.cnblogs.com/xuyuntao/articles/6391728.html 基本概念采用Fl ...

gird和flex布局