在上一篇博客 【移动端网页布局】flex 弹性布局 ⑤ ( 设置侧轴单行子元素排列方式 | align-items 样式说明 | 代码示例 ) 介绍的 align-items 样式 只能设置 侧轴单行子元素排列方式 , 如果侧轴有多行元素排列 , 则需要使用 align-content 样式进行设置 ;
justify-content 样式 用于设置 主轴子元素排列方式 ; 使用该样式前 , 务必先设定主轴方向 ;
默认情况下，HTML元素都在标准流中呈现和展示。我们之前把元素分为块级元素，行内元素，行内块级元素，他们的特性是块级独占一行，行内和行内块级可以在一行内共存，这些特性都是针对标准流的。总结一下就是，标准流中元素只能在水平或垂直方向上排版。如果元素是块级元素, 那么就会垂直排版，如果元素是行内元素/行内块级元素, 那么就会水平排版。
过去我们要在一个大盒子里面放三个这样的盒子,都是用的浮动,但是学习了弹性flex布局,我们可以更简单的做出来,为了凸显它的优势,用的还是行内元素span,只要用了flex,行内元素也可以直接设置大小.
文本垂直操作：vertical-align的使用图示。middle设置居中。 vertical-align 只对行内元素、行内块元素和表格单元格（table-cell）元素生效：不能用它垂直对齐块级元素。
Author：Mr.柳上原 付出不亚于任何的努力 愿我们所有的努力，都不会被生活辜负 不忘初心，方得始终 有多大能力 就要担负起多大的责任 一直不想去担负这种责任 所以找工作的时候都尽量做普通员工 只需要做好自己本职工作 不用去想公司的发展 不用去规划员工的工作计划 不用去为业绩而烦恼 然而 当年纪越来越大 阅历越来越广 不得不去，或者说是被强行推上管理岗位 当站到这个位置上时 才发现有多难 每周需要统筹员工工作安排 审核上周工作进度 拓展新的渠道和平台 统计销售数据 处理遇到的各种困难 多少次因为业绩不好
依稀记得童年时期，站在电视机傍边，和自己的小伙伴玩小霸王学习机的情景。时间如白驹过隙，现在小伙伴的孩子都会打酱油了，而自己为了生活和梦想依旧在奋斗。怀念青春，就写了这样的一个小游戏。
弹性盒子布局flex,为自适应布局而生 弹性盒子布局的选项很多(选项越多->越专业->越难记), 但对于普通的开发者,只要记住两三个关键词,就能满足大多数的需求, 这里就通过几个demo,展示弹性盒
在 flex 弹性布局容器 中 , 通过设置 justify-content 属性 , 可以实现主轴方向上水平居中的效果 ;
flex-flow属性：flex-direction和flex-wrap的简写，默认row nowrap
CSS 布局本质就是控制元素的位置和大小。比如这样的布局：元素宽960px，水平居中。宽960px是大小。水平居中是位置。又如这样的布局：两个元素在一行，左侧元素固定宽200px，右侧元素撑满剩余空间。固定宽200px，撑满剩余空间是大小。两个元素在一行是位置。
Flex之于 CSS3 就如Promise之于 ES6，都解决了开发者的痛点问题，大大提高了生产力。借助Flex，可以轻松实现栅栏布局、水平/垂直居中、自定义排列方向和顺序等等需求。
在上一篇博客中实现的搜索栏 , 使用 固定定位 设置该搜索栏位置 , 不管网页如何滚动 , 最上方始终显示该搜索栏 ;
今天移动web开发学完了，整理一下思路，移动web首先学习的就是就是flex布局。记录一下flex布局和移动适配的一些知识。
本专栏是自己学前端的征程，纯手敲的代码，自己跟着黑马课程学习的，并加入一些自己的理解，对代码和笔记 进行适当修改。希望能对大家能有所帮助，同时也是请大家对我进行监督，对我写的代码进行建议，互相学习。
CSS3中的 flex 属性，在布局方面做了非常大的改进，使得我们对多个元素之间的布局排列变得十分灵活，适应性非常强。其强大的伸缩性和自适应性，在网页开中可以发挥极大的作用。
css水平和垂直居中是一个亘古不变的话题，它常常出现在优美的网页上以及各大前端面试当中。
如何让元素水平居中？这是一道很常见的面试题，对于已知宽度和未知宽度的处理方法又有所不同，大致有以下7种：
说起flexbox，都算是件陈年旧事了，它是2009年W3C提出的一种全新的可伸缩的CSS布局方式。依赖flexbox，我们可以更简单，高效的完成可伸缩式页面的布局。 业界与flexbox的相关教程文章也是各式各样，新旧交替，很多小伙伴对flexbox想用又不敢用，究其原因也就是即分不清它各个版本的编写规范，又苦恼于大家总是挂在嘴边的一句“flexbox兼容性不好”。 所以今儿前来总结一个精华干货贴，回顾那些楼主在项目里用过的flexbox，来谈谈那些不用苦恼“兼容”的flexbox最佳实例（本文只聊移动
线性布局容器表示按照垂直方向或者水平方向排列子组件的容器，ArkTS提供了Column和Row容器来实现线性布局。
首先 , 设置固定定位 , 固定定位盒子始终显示在浏览器中指定的位置 , 与父容器或其它容器无关 ;
布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。
近几年，CSS领域出现了一些复杂的专用布局工具，用以代替原有的诸如使用表格、浮动和绝对定位之类的各种变通方案。Flexbox，或者说是弹性盒子布局模块（Flexible Box Layout Module）是这些新布局工具中的第一个，接着是CSS网格布局模块（CSS Grid Layout Module）。我们会在本文给出一个易于理解的flexbox入门介绍。
当鼠标移动到 按钮 上之后 , 鼠标 变为 小手 样式 , 并且 按钮 以 中心位置 为准 , 放大到原来的 2 倍 ;
我们经常使用CSS，但是却不怎么了解CSS，本文主要对vertical-align、BFC、position中开发过程不怎么注意的特性进行简要总结，从本文中，你将了解到以下内容：
层叠样式表。(Cascading Style Sheets) CSS 能够对网页中元素位置的排版进行像素级精确控制, 实现美化页面的效果. 能够做到页面的样式和结构分离。
本文介绍了移动端全兼容的flexbox速成班，包括常见概念、版本对比、实用技巧和实例演练等内容，并提供了7个移动端常见布局的demo。
※ flex-direction:column-reverse (与column 相反)
（友情提示：RN学习，从最基础的开始，大家不要嫌弃太基础，会的同学请自行略过，希望不要耽误已经会的同学的宝贵时间） 今天在讲解Flexbox之前，我们先讲解一下高度和宽度的问题。因为Height and Width的问题很简单，就不单独写一篇文章了。顺带说一下即可。 Height and Width 一个组件的高度和宽度，决定了它在屏幕上显示的大小。 固定尺寸 最简单的设置组件的尺寸的方法就是通过添加一个固定的宽度和高度。所有尺寸大小在React Native没有单位的,代表着独立的像素密度。 官网例子 i
英文 | https://medium.com/javascript-in-plain-english/css-flexbox-explained-with-examples-85efa38e4770
一、 img的垂直水平居中 使用到的重要样式属性display,vertical-align vertical-align:middle这个属性是对table元素垂直居中起作用，如果想使用在img元素上，就注意下面的display设置 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .mai
align-self 子项目属性样式 , 可以 设置 某个子项目元素 与 其它子项目 排列方式不同 ;
本文翻译来自https://css-tricks.com/snippets/css/a-guide-to-flexbox/
给父级div设置相对定位，子元素div设置绝对定位，left、right、top、bottom都设置为0，然后将margin设置为auto即可实现。
FLEX布局也称弹性布局，可以为盒状模型提供最大的灵活性，是布局的首选方案，现已得到所有现代浏览器的支持。
最近我参与实施的两个项目中，一个页面交互复杂，而另一个相对传统，两个项目相比之下凸显出了页面布局样式的时间占比不可忽视，使用了弹性布局代码量精简了不少。
作为一个前端小白，入门跟着这四个来源学习，感谢作者的分享，在其基础上，通过自己的理解，梳理出的知识点，或许有遗漏，或许有些理解是错误的，如有发现，欢迎指点下。
弹性布局（Flexbox）逐渐流行，越来越多人使用，因为它写 CSS 布局真是太方便了。
Flex 是 Flexible Box 的缩写， 用来为盒状模型提供最大的灵活性，也被称为”伸缩布局”，”弹性布局”，”伸缩盒布局”，”弹性盒布局”。
要想制作一个美观的页面，掌握样式中布局的技术是必备的。因为在页面开发中，我们需要将设计师提供的图纸制作成精美的页面，不同部分考虑使用什么样的布局是必不可少的。
这里总结一下 WEB 前端面试 CSS 部分的常见问题，同时这些问题也是对一些基础的技术概念和思想的理解。对这些基本知识的掌握程度和深度决定了你的技术层级。高级工程师是必须掌握本文列出的这些知识的，资深工程师则要对这些基本概念的纵向深度进行挖掘。
CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。
今日打卡任务 Day9参考答案 打卡作业 Day09 作业布置 一. 完成课堂所有的代码 二. 总结绝对定位的相对元素以及常见的解决方案 子绝父相 子元素绝对定位、 父元素相对定位 子绝父绝 子元素绝对定位 父元素绝对定位 子绝父固 子元素绝对定位 父元素固定定位 三. 总结浮动常见的规则内容 元素一旦浮动后, 脱离标准流 朝着向左或向右方向移动，直到自己的边界紧贴着包含块（一般是父元素）或者其他浮动元素的边界为止 定位元素会层叠在浮动元素上面 如果元素是向左（右）浮动，浮动元素
上面是一个空表单。根据 HTML 标准，它是一个块级元素，默认将占据全部宽度，但是高度为0，因为没有任何内容。
有些方式只适用于内联元素(行内元素)，有些方式适用于所有元素，把我胸中韬略，一一展现。 在此之前，我先讲解一下W3C标准盒子模型： 所有HTML元素可以看作盒子，它包括：外边距（margin）、边框（border）、内边距（padding）、实际内容（content）四个属性。
（3）换行，并反向排列（从下往上排列），wrap-reverse------从下往上，从左往右进行排列
HTML5＋CSS3＋JavaScript Web 前端开发案例教程（慕课版）【不推荐】，微信读书中找到的学习Web前端书籍，第10章开始啦，耶(＾－＾)V
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
实时音视频
