Flex布局

1、分清主轴和交叉轴

flex-direction 为 row 时，主轴是横向的，相反的为 column 时，主轴是纵向的。

2、搞清楚6个参数的含义

flex-direction: row | row-reverse | column | column-reverse;
flex-wrap: no-wrap | wrap | wra-reverse;
flex-flow: flex-direction || flex-wrap;
justify-content: flex-start | flex-end | center | space-between | space-around; (主轴上的排列样式)
align-items:stretch | flex-start | flex-end | center | baseline;（交叉轴上的排列样式）
align-content: stretch | flex-start | flex-end | center | space-between | space-around; (多条主轴的对齐方式，比较少使用到）

3、DEMO

改变参数的值，来理解每个参数的含义，更加有助于理解和使用。

<!Doctype html>
<html><head><title>Flex布局</title></head><style>body{width:100%;background: #f0f;min-width:800px;}.content{width: 94%;padding:3%;}.box{width:100%;display: flex;flex-direction: row;justify-content: space-around;align-items:center ;align-content: center;flex-wrap: wrap;}.item{width:46%;height:200px;padding:1%;}.small-box{background:pink;width:100%;height:100%;}</style><body><div class="content"><div class="box"><div class="item"><div class="small-box"></div></div><div class="item"><div class="small-box"></div></div><div class="item"><div class="small-box"></div></div><div class="item"><div class="small-box"></div></div><div class="item"><div class="small-box"></div></div><div class="item"><div class="small-box"></div></div><div class="item"><div class="small-box"></div></div><div class="item"><div class="small-box"></div></div><div class="item"><div class="small-box"></div></div><div class="item"><div class="small-box"></div></div><div class="item"><div class="small-box"></div></div><div class="item"><div class="small-box"></div></div><div class="item"><div class="small-box"></div></div><div class="item"><div class="small-box"></div></div><div class="item"><div class="small-box"></div></div><div class="item"><div class="small-box"></div></div><div class="item"><div class="small-box"></div></div></div></div></body>
</html>

css面试题之Flex布局相关推荐

css 快速入门之 flex 布局教程
css 快速入门之 flex 布局教程 flex 简称弹性布局,是2009年W3C提出的 css3 新属性. 弹性布局(flexible box)模块旨在提供一个更加有效的方式来布置,对齐和分布在容器 ...
Bootstrap4+MySQL前后端综合实训-Day01-AM【实训安排、HBuilder下载及使用、双飞翼布局（圣杯布局）案例、CSS在线手册、flex布局中的对齐方式】
[Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程博客汇总表详细笔记] 目录实训安排日常要求.项目要求项目开发流程 HTML+CSS+JavaScript 基 ...
CSS之深入理解 flex 布局以及计算
起因:对于Flex布局,阅读了大漠老师和其他老师写的文章后,我还是不太理解Flexbox是如何弹性的计算子级项目的大小以及一些其他细节.在大漠老师的帮助下,我去查阅Flexbox 的 W3C 规范文档 ...
CSS通用样式2——Flex布局
Bootstrap4与Bootstrap3最大的区别是Bootstrap 4使用弹性盒子来布局,而不是使用浮动来布局.弹性盒子也是CSS的一种新的布局模式,更适合响应式的设计. 一.定义弹性盒子使用 ...
【HTML/CSS】弹性盒子 flex布局制作一个动画卡片
可以自己去找动画人物纯色背景,这样抠图比较容易. 字体是我随便找的下面是代码(看不懂没事): <!DOCTYPE html> <html lang="en"&g ...
CSS常见的几种布局方式
在看前端面试题的时候经常会看到css的布局方式,今天整理一下分享给大家. #单列布局 #两列自适应布局 #三栏布局(圣杯布局和双飞翼布局) 一.单列布局常见的单列布局有两种: header.cont ...
一劳永逸的搞定 flex 布局
2019独角兽企业重金招聘Python工程师标准>>> 寻根溯源话布局一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平.垂直同时居中.记得刚开始学习 CSS 的时候, ...
Flex布局 - 仿携程网移动端首页案列练习
目录一.搭建相关文件结构 1.1 文件结构 1.2 引入初始化样式 1.3 常用初始化样式二.搜索模块 2.1 搜索模块 - 外观布局 2.2 搜索模块 - 个人中心 2.3 搜索模块 - 搜索框 ...
Flex布局教程（非常受用）
目录前言: 一.语法篇 1.概述 2.Flex 布局怎么用任何一个容器都可以指定为 Flex 布局行内元素也可以使用 Flex 布局: Webkit 内核的浏览器,必须加上-webkit前缀: ...
HTML Flex布局教程
Flex 布局教程:语法篇 bShare.addEntry({ title: document.getElementById("page-title").innerHTML, ur ...

css面试题之Flex布局

Flex布局

1、分清主轴和交叉轴

2、搞清楚6个参数的含义

3、DEMO

css面试题之Flex布局相关推荐

最新文章

热门文章