Flex布局“弹性盒子”

一.概念

flex布局:

Flex Box 的缩写,意味“灵活的盒子”或“弹性盒子”,所以flex布局又称“弹性布局”。

  • flex容器

采用flex布局的元素,成为flex容器。display:flex;

  • flex项目

flex容器的所有子元素自动成为容器成员,称为flex项目。

<div style=“ display:flex;”>
  <img >
  <div></div>
  <p></p>
  <p> <a></a></p>
</div>

注:<a>不是项目,如果想让<a>成为项目可以给其父元素<p>添加display:flex;

<style>
 ul{list-style-type: none;}
 li{width: 100px; text-align: center;}
 a{text-decoration: none;}
 ul{display: flex;}     /*可以让垂直导航变水平  因为项目默认沿主轴排列*/
</style>
<body>
 <ul>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#">6</a></li>
 </ul>
</body>

二.属性

Flex布局“弹性盒子”

容器属性:

display                是否flex布局

flex-direction       主轴方向

flex-wrap             是否换行

flex-flow               flex-firection/flex-wrap的缩写

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

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

align-content        许多行项目整体在交叉轴上的对齐方式

  • display

是否使用flex布局。

display :flex / inline-flex;

Flex:将元素作为块级弹性伸缩盒显示;

inline-flex:将元素作为内联块级弹性伸缩盒显示。

  • flex-direction

决定主轴的排列方向,即项目的排列方向。

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

row:水平(左到右)默认

row-reverse:反转水平(右到左)

column:垂直(上到下)

column-reverse:反转垂直(下到上)

  • flex-wrap

如果项目沿主轴一行排不了,决定是否换行。

flex-wrap : nowrap / wrap / wrap-reverse;

nowrap :默认 不换行 平均压缩每一个项目排满一行

wrap :正向换行 (第一行在上方)

wrap-reverse:反向换行(第一行在下方)

  • flex-flow

是flex-direction和flex-wrap的缩写。

flex-flow : flex-direction flex-wrap;

默认:flex-flow:row nowrap;

  • justify-content

定义项目在主轴上的对齐方式。

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

flex-start:主轴开始 默认

flex-end:主轴结束

center:主轴中心

space-between:两端对齐,项目中间间隔相等

space-around:每个项目两侧的间隔相等(项目之间的间隔比项目与边框的距离大一倍)

  • align-items

定义在交叉轴上如何对齐。

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

flex-start:交叉轴开始

flex-end:交叉轴结束

center:交叉轴中心

baseline:项目的第一行文字的基线对齐

strech:默认  如果项目未设置高度或高度为auto,项目将占满容器的高度

  • align-content

定义多行项目在交叉轴上如何对齐,如果项目只有一个,该属性不起作用。

align-content : flex-start / flex-end / center / space-between / space-around / stretch;

flex-start:整体从交叉轴开始对齐

flex-end:整体从交叉轴结束对齐

center:整体从交叉轴中心对齐,用于设置多行垂直居中

space-between:整体与交叉轴中点对齐,多行之间的间隔平均分配

space-around :每行的上下加个都相等,所以,每行之间的间隔比两端与边框的间隔大一倍。

strech:默认   如果项目未设置高度或高度为auto,项目将占满容器的高度

  • 项目属性:

order:项目的排列顺序

flex-grow:项目放大

flex-shrik:项目缩小

flex-basis:主轴空间

flex:flex-grow flex-shrik flex-basis 的缩写

align-self:单个项目对齐方式

  • order

定义项目的排列顺序,默认为0。

order:数值;

数值越小排列越靠前。

例如,order值为-1的项目排在前面。

  • flex-grow

定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。

如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话);

如果一个项目的flex-grow属性为2,其它为1,则前者占剩余空间将比其它项目多一倍,依次类推;

如果有的项目有flex-grow属性,有的项目有width属性,有flex-grow属性的项目将等分剩余空间。

  • flex-shrink

定义项目的缩小比例,默认为1,即如果空间不足,项目将被缩小。

如果所有项目的flex-shrink属性都为1,当空间不足时,都将被等等比例缩小;

如果一个项目的flex-shrink属性为0,其它项目都为1,则空间不足时,前者不缩小;

注意负值对该属性无效。

  • flex-basis

定义了项目占据的主轴空间(main-size)。

如果主轴为水平,效果跟width一样;

如果主轴为垂直,效果跟height一样;

如果同时设置,flex-basis优先级高于width/height;

默认值为auto,即项目本来width/height。

  • flex

是flex-grow flex-shrik flex-basis 的缩写,默认值为 0 1 auto;

后2个属性值可选,即flex:1;等同于flex:1 1 auto;

该属性有两个快捷值auto(1 1 auto)、none(0 0 auto)。

  • align-self

设置单个项目与其它项目不一样交叉轴上的对齐方式,即可覆盖align-items属性。

ü默认值为auto,表示继承父元素(即flex容器)的align-items属性,如果没有,等同于strech。

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

 

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/5769.html

(0)
江山如画的头像江山如画管理团队
上一篇 2020年4月11日 下午7:10
下一篇 2020年4月14日 上午9:20

99%的人还看了以下文章

  • CSS Sprites:图片整合技术详细案例

    CSS Sprites 的目的就是通过整合图片,减少对服务器的请求数量,从而加快页面加载速度。介绍了CSS Sprites技术的实现方法,优点和缺点。最后通过实例CSS Sprites技术制作导航栏演示CSS Sprites的使用。 手把手,永哥教你学会css sprite(雪碧图)技术 CSS Sprites的原理:将小图片整合到一张大的图片上,根据具体图…

    2019年11月5日 网页制作
    1.8K0
  • CSS 实现水平、垂直居中布局代码大全

    CSS实现水平居中 若是行内元素,则直接给其父元素设置text-align: center即可 若是块级元素,则直接给该元素设置margin: 0 auto即可 若子元素包含浮动元素,则给父元素设置width:fit-content并且配合margin .parent { width: -webkit-fit-content; width: -moz-fit…

    2019年11月26日
    2.5K0
  • Marquee标签制作滚动公告、新闻列表

    效果演示 《Marquee标签实现跑马灯、滚动公告、通知效果》 Marquee标签制作滚动公告、新闻列表 <!doctype html> <html> <head> <meta charset=”utf-8″> <title>marquee实现的滚动公告|www.125jz.com</titl…

    2019年2月28日
    3.0K0
  • 第13课:浮动元素(float)

    我们可以通过CSS属性float令元素向左或向右浮动。也就是说,令盒子及其中的内容浮动到文档(或者是上层盒子)的右边或者左边(参见第9课关于盒状模型的描述)。下图阐明了其原理: 举个例子,假如我们想让一张图片被一段文字围绕着,那么其显示效果将如下所示: 如何实现这个效果? 上例的HTML代码如下所示: <div id=”picture”><…

    2020年2月25日
    2.0K0
  • 页面编码为UTF-8的项目中servlet中文显示乱码的解决方法

    servlet中文显示乱码:
    1、servlet中输出中文字符
    2、servlet接收表单传值并显示,表单字段含中文。

    网页制作 2020年2月23日
    1.9K0
  • jQuery获取URL传递的参数

    URL传递参数是程序开发中经常用到的,中国网页设计给大家分享使用jQuery如何获取URL传递的参数。 例如要获取下面URL地址中的参数: http://www.125jz.com?id=”2020″&title=”jQuery获取URL传递的参数” 实现代码如下: //获取URL参数a和b funct…

    2018年9月30日
    1.8K0

发表回复

登录后才能评论