CSS Flexbox 弹性盒子模型

CSS Flexbox 弹性盒子模型

设置元素样式为 display: flex 或 display: inline-flex, 让元素变成flex容器, 从而可以通过flex模式布局它的子元素.

flex-direction:

值    row | row-reverse | column | column-reverse
默认值   row

flex-wrap:

值    nowrap | wrap | wrap-reverse
默认值  nowrap

flex-flow:

值    <flex-direction> ‖ <flex-wrap>
默认值  row nowrap

Flex子对象分布

justify-content:

值    flex-start | flex-end | center | space-between | space-around |space-evenly
默认值   flex-start

align-items:

值    flex-start | flex-end | center | baseline | stretch
默认值  stretch

align-self:

值    auto |flex-start | flex-end | center | baseline | stretch
默认值  auto

align-content:

值    flex-start | flex-end | center | space-between | space-around |space-evenly | stretch
默认值  stretch

flex-grow:

值    <number>
默认值  0

flex-shrink:

值    <number>
默认值  1

flex-basic: <width>

值    auto | <length> | <percentage>
默认值  auto

flex:

值    [ <flex-grow> <flex-shrink>? ‖ <flex-basis> ] | none
默认值  0 1 auto

原文地址:https://www.cnblogs.com/yaoyu126/p/8277804.html

时间: 2024-11-03 05:36:09

CSS Flexbox 弹性盒子模型的相关文章

flexbox弹性盒子模型

这几天在做移动端的web开发,遇到了一些问题,之前没有折腾过这方面的东西,这次好好吸收下 css3的flexbox--弹性盒子模型,这个盒模型决定了一个盒子在其他盒子中的分布方式及如何处理可用的空间. 优点:可以很轻松的创建自适应的浏览器窗口的流动布局或自适应字体大小的弹性布局. 1 <body> 2 <div id="box1">1</div> 3 <div id="box2">2</div> 4 <

CSS基础 - 弹性盒子模型 - flex布局

flex布局提供一种对容器中条目更方便地进行布局,控件分配,和对齐的方式.flex布局的容器能够根据窗口大小变化而改变条目的大小和位置,以呈现最佳的显示效果,它的优势在于开发者可只需要申明容器或其子条目的布局的方式,和窗口或容器大小变化时元素的行为,而不需要去实现具体的适应. body { direction:rtl;//定义body下的元素渲染的方向 } .flex-container { display:flex; //申明display方式为:flex flex-direction:row

CSS弹性盒子模型

<!-- # 用于学习css弹性盒子模型 - 是一种一维的布局模型.给flexbox的子元素之间提供了强大的空间分布和对齐能力 - display:flex 设置为弹性盒子 - flexbox内flex元素的默认属性 - 元素排列为一行 (flex-direction 属性的初始值是 row). - 元素从主轴的起始线开始. - 元素不会在主维度方向拉伸,但是可以缩小. - 元素被拉伸来填充交叉轴大小. - flex-basis 属性为 auto. - flex-wrap 属性为 nowrap.

[ css 弹性盒子模型 box-flex 及相关属性 ] box-flex属性弹性盒子模型讲解及实例演示

box-flex属性(和谐版) 有道桌面词典显示,”flex”一词中文有“收缩”之意.不过,从此属性实际上产生的效果来看,无论怎样用“收缩”一词解释都显得很牵强.所以,这里,直接抛开字面意思,我们可以将”box-flex”理解为”房子-分配”.box为“盒子”的意思,我们可以理解为当下价格巨高的“房子”,”flex”指兄弟几个“分配房子”. 举个更实际点的例子:马林大叔省吃俭用一辈子,终于在上海郊外买了间150平米的商品房.后来,马林大叔想回老家养老,决定把房子分配给他的三个儿子.ok,先暂停下

CSS box-flex属性,然后弹性盒子模型简介

一.here we go 看到大神写的关于box-flex的介绍,忍不住收了,大神介绍的很详细,新技能get! 二.box-flex属性(和谐版) 有道桌面词典显示,"flex"一词中文有"收缩"之意.不过,从此属性实际上产生的效果来看,无论怎样用"收缩"一词解释都显得很牵强.所以,这 里,直接抛开字面意思,我们可以将"box-flex"理解为"房子-分配".box为"盒子"的意思,我们

CSS box-flex属性 弹性盒子模型简介

二.box-flex属性(和谐版) 有道桌面词典显示,”flex”一词中文有“收缩”之意.不过,从此属性实际上产生的效果来看,无论怎样用“收缩”一词解释都显得很牵强.所以,这里,直接抛开字面意思,我们可以将”box-flex”理解为”房子-分配”.box为“盒子”的意思,我们可以理解为当下价格巨高的“房子”,”flex”指兄弟几个“分配房子”. 举个更实际点的例子:马林大叔省吃俭用一辈子,终于在上海郊外买了间150平米的商品房.后来,马林大叔想回老家养老,决定把房子分配给他的三个儿子.ok,先暂

css3弹性盒子模型之box-flex

css3弹性盒子模型之box-flex 浏览器支持 目前没有浏览器支持 box-flex 属性. Firefox 支持替代的 -moz-box-flex 属性. Safari.Opera 以及 Chrome 支持替代的 -webkit-box-flex 属 box-flex是css3新添加的盒子模型属性),它的出现打破了我们经常使用的浮动布局,实现垂直等高.水平均分.按比例划分.但是它有一定的局限性,在firefox.chrome这浏览器下需要使用它们的私有属性来定义:firefox(-moz)

css position弹性盒子测试

总结: 1.利用样式height:100%设置div高度为全屏时候必须设置所有的父元素,但是父元素那么多,不可控,所以此法不可行: 2.设置父框架的padding为100px,div进行float,padding有效:但div进行position,并配合left:0,padding失效: 3.弹性盒子模型需要position属性和两个相对立的属性,比如top和bottom,left和right. 4.要做出来自适应的三个模块,要会计算中间div进行position后left和right的值,此值

02 AppCan入门学习之弹性盒子模型

弹性盒子模型 效果: 一.弹性盒子模型 1. 流式布局 <!-- 流式布局--> <divstyle='display: inline;border: 1px solid orange'> <divstyle='display: inline;background: #66ccff'>流式文件左边</div> <divstyle='display: inline;background: #ffffff'>流式文件右边</div> &l