flex弹性盒模型(容器块上的属性)

容器块上的属性：

flex-direction:决定主轴方向

值row:（默认值）主轴为水平方向，起点在左端

row-reverse：水平方向，起点在右端

colum：垂直方向，起点在上沿

column-reverse：垂直方向，起点在下沿

flex-wrap:换行规则

值nowrap（默认值）不换行

wrap：换行，第一行在上方

wrap-reverse：换行，第一行在下方

justify-content:设置项目在主轴上的对齐方式

值conter居中

fle-start：从起点开始排序

fle-end：从终点开始排序

space-between：两端靠边，剩余空间平分给项目之间的间距

space-around：剩余空间平分给每个项目的两侧

align-items:设置项目在交叉轴上的对齐方式

值conter居中

fle-start：从起点开始排序

fle-end：从终点开始排序

stretch：项目高自动时，上下占满

baseline：项目中第一行文本基线对齐

align-content：多根主轴时的对齐方式

值conter居中

fle-start：与交叉轴起点对齐

fle-end：与交叉轴终点对齐

stretch：轴线占满整个交叉轴

space-between：与交叉轴两端对齐，轴线之间间隔平均分布

space-around：每根轴线两侧的间隔都相等

原文地址：https://www.cnblogs.com/qdxiaochong/p/9281781.html

时间： 2024-10-07 18:40:57

flex弹性盒模型(容器块上的属性)的相关文章

flex弹性盒模型理解

首先,flex布局的迷之属性们,如果一知半解,机械记忆的话,那不到半个月基本忘光光.先感受一下这12个flex布局属性,是不是很“迷”人. 容器属性 flex-flow flex-direction flex-wrap justify-content align-items align-content 元素属性 order flex-grow flex-shrink flex-basis flex align-self 就连老外也都在twitter吐槽不好理解,可见还是有一定的学习成本. 而目前

87.CSS Flex 弹性盒模型布局教程（共用的css在48篇文章gird）

CSS Flex 弹性盒模型布局教程 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. flex布局就是给任何一个容器添加 display:flex 注:设为 Flex 布局以后,子元素的float.clear和vertical-align属性将失效. 注:Safari 6.1+(前缀-webkit-) iOS 7.1+(前缀-webkit-)最新flex 兼容性查看请点此处 最新Flex兼容性 Flex 容器 flex contain

box flex 弹性盒模型（转载）

css3引入了新的盒模型——弹性盒模型,该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间.这与XUL(火狐使用的用户交互语言)相似,其它语言也使用相同的盒模型,如XAML .GladeXML. 使用该模型,可以很轻松的创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局.本文的例子使用以下的HTML代码: <body>  <div id="box1">1</div>  <div id="box2">2

flex弹性盒模型

flex 意思是弹性布局,用来给盒模型提供最大的灵活度,指定容器中的项目为弹性布局,类似于float:left; 比float的好处是容器没有设置高度,会根据项目来自适应高度,我们都知道,设置float属性,如果没有设置高度,那么容器会脱离文档流,需要清除浮动,才可以根据项目的高度规定高度. 父元素称之为容器,子元素称之为项目 水平的方向叫主轴, 水平和垂直交叉点,称之为交叉轴 flex中如果子元素中的总宽度不超过父级,那么就正常排列, flex中如果子元素中的总宽度超过父元素,那么就按照父级的

iPhone5，使用display:flex 弹性盒模型的兼容问题

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> <meta content="yes" name

flex 弹性盒模型

其它属性(block ,inline-block)转变为flex属性display : flex 容器的属性 flex-direction: 决定主轴方向(即项目的排列顺序) row :默认值,主轴在水平方向,起点在左端 row-reverse :主轴在水平方向,起点在右端 column :主轴在垂直方向,起点在上沿 column-reverse :主轴在垂直方向,起点在下沿 flex-wrap : 默认情况下,项目都排列在一条线(轴线)上,若果一条轴线排不下,如何换行 nowrap :(默认值

flex弹性盒模型布局

容器属性:1.flex-direction:项目的排列方向(1)row 主轴方向排列(2)row-reverse 主轴反方向排列(3)column 纵向排列(4)column-reverse 纵向反方向排列2.flex-wrap:项目的换行方式(1)nowrap:不换(2)wrap:换行,第一行在上方(3)wrap-reverse:换行,第一行在下方3.flex-flow:是flex-direction和flex-wrap 的简写,默认 row nowrap4.justify-content:项

flex(弹性盒模型)布局写一个移动端

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>&

CSS弹性盒模型flex在布局中的应用

× 目录 [1]元素居中 [2]两端对齐 [3]底端对齐[4]输入框按钮[5]等分布局[6]自适应布局[7]悬挂布局[8]全屏布局 前面的话 前面已经详细介绍过flex弹性盒模型的基本语法和兼容写法,本文将介绍flex在布局中的应用 元素居中 [1]伸缩容器上使用主轴对齐justify-content和侧轴对齐align-items <style> .parent{ display: flex; justify-content: center; align-items: center; } &