flex布局justify-content属性和align-items属性设置

前言:

flex最常用的就是justify-content和align-items了,这里把这两个属性介绍下,大家更多关于flex布局可以查看阮一峰的日志,写的非常清楚!

阮一峰flex布局的日志:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

1、justify-content(在父元素设置)
    设置弹性盒子元素在主轴(横轴)的对齐方式。

取值:

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

flex-start: 弹性盒子元素将向行起始位置对齐。第一个元素与左起始边界对齐,后面的元素接着第一个元素进行排列。

flex-end: 弹性盒子元素将向行结束位置对齐。整体靠着行结束的位置排列。

center:整体居中显示。

space-between: 弹性盒子元素均匀分布。第一个元素的边界与行的主起始位置的边界对齐,同时最后一个元素的边界与行的主结束位置的边距对齐,而剩余的伸缩盒项目则平均分布,并确保两两之间的空白空间相等。

space-around: 弹性盒子元素均匀分布。两端保留子元素与子元素之间间距大小的一半

2、align-items, align-self 

设置弹性盒子元素在垂直方向上(纵轴)的对齐方式。其中align-items属性用于弹性容器,而align-self用于弹性项目。

  • align-items: flex-start | flex-end | center | baseline | stretch;
  • align-self: auto | flex-start | flex-end | center | baseline | stretch;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>flex布局justify-content属性</title>
    <style rel="text/stylesheet">
        .box {
            display: -webkit-flex;
            display: flex;
            width: 400px;
            height: 100px;
            margin: 0;
            padding: 0;
            border-radius: 5px;
            list-style: none;
            background-color: #eee;
        }

        .box li {
            margin: 5px;
            padding: 10px;
            border-radius: 5px;
            background: #aaa;
            text-align: center;
        }

        #box {
            -webkit-justify-content: flex-start;
            justify-content: flex-start;
        }

        #box2 {
            -webkit-justify-content: flex-end;
            justify-content: flex-end;
        }

        #box3 {
            -webkit-justify-content: center;
            justify-content: center;
        }

        #box4 {
            -webkit-justify-content: space-between;
            justify-content: space-between;
        }

        #box5 {
            -webkit-justify-content: space-around;
            justify-content: space-around;
        }
    </style>
</head>
<body>
    <h2>justify-content: flex-start</h2>
    <ul id="box" class="box">
        <li>a</li>
        <li>b</li>
        <li>c</li>
    </ul>

    <h2>justify-content: flex-end</h2>
    <ul id="box2" class="box">
        <li>a</li>
        <li>b</li>
        <li>c</li>
    </ul>

    <h2>justify-content: center</h2>
    <ul id="box3" class="box">
        <li>a</li>
        <li>b</li>
        <li>c</li>
    </ul>

    <h2>justify-content: space-between</h2>
    <ul id="box4" class="box">
        <li>a</li>
        <li>b</li>
        <li>c</li>
    </ul>

    <h2>justify-content: space-around</h2>
    <ul id="box5" class="box">
        <li>a</li>
        <li>b</li>
        <li>c</li>
    </ul>
</body>
</html>

3、flex的兼容性

 兼容性检测网址:www.caniuse.com

  

  • 兼容IE10以上,但是要加前缀 -ms-
  • Edge全部支持
  • firfox 版本28以上,低版本要加 -moz-
  • chrome 21以上,低版本要加 -webkit-

微信小程序中经常使用flex布局非常方便:

弹性盒子布局:

1、 首先找到使用弹性盒子布局的容器元素view,首先将他变成一个flex

a)      display:flex;   //设置完后默认的每个元素都是从左往右放置的

   

b)     目标一:每个元素独占一行,自上而下放置

        flex-direction: column;

  

c)      目标二:自上而下放置时在垂直方向上均匀分布;元素在垂直方向上间隔一致,而且第一个和最后一个元素离顶部和底部都有一定的间距;

       justify-content: space-around;

  

  

d)     目标三:元素在水平方向上居中

    align-items: center;

  

弹性盒子布局优点:

.container {

  background-color: #eee;

  height: 100vh;

  // 下面是弹性盒子布局

  display: flex;

  flex-direction: column;  // 纵向排列

  justify-content: space-around;

  align-items: center;

// flex-wrap: wrap;  // 一行显示不了可以换行,用于pc端多个item排列时

}
  1. 就算下面再增加几个text,依然会自动垂直,水平居中
  2. 比较直观,只需要在容器中设置,一目了然
  3. 非常高效,灵活的应对页面结构的变化

  

原文地址:https://www.cnblogs.com/mmzuo-798/p/10083535.html

时间: 2024-11-03 00:38:36

flex布局justify-content属性和align-items属性设置的相关文章

深入理解 flex 布局以及计算_Flexbox, Layout

起因 对于Flex布局,阅读了 大漠老师和其他老师写的文章后,我还是不太理解Flexbox是如何弹性的计算子级项目的大小以及一些其他细节.在大漠老师的帮助下,我去查阅Flexbox 的 W3C 规范文档. 注:本篇博文不适合未接触过Flex 布局的人, 如果想了解flex 布局基础.请参考理解Flexbox:你需要知道的一切 对于flex盒模型的设计期望 flex盒模型是被期望设计成: 在任何流动的方向上(包括上下左右)都能进行良好的布局 可以以逆序 或者 以任意顺序排列布局 可以线性的沿着主轴

CSS中的flex布局

1.flex 布局的概念 Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性.任何一个容器都可以指定为 Flex 布局,行内元素也可以通过 inline-flex 使属性值用 Flex 布局. inline-flex 和 inline-block 一样,对设置了该属性值的元素的子元素来说是个 display:flex 的容器,对外部元素来说是个 inline 的块. .box{ display: flex; } .inlinebox{ displ

CSS3 Flex布局 Flexbox的属性详解

原文:A Visual Guide to CSS3 Flexbox Properties Flex布局官方称为CSS Flexble Box布局模型是CSS3为了提高元素在容器中的对齐.方向.顺序,甚至它们是动态的或者不确定大小的新布局模型.Flex容器的主要特征是能够调整其子元素在不同的屏幕大小中能够用最适合的方法填充合适的空间. 很多的设计师和开发者发现Flex布局很容易使用,它定位元素简单因此很多复杂的布局能够用很少的代码实现,引领更简单的开发过程.Flex布局的算法是基于方向的,不同于基

flex 布局下关于容器内成员 flex属性的理解

flex布局分为容器的设置和容器内成员的设置,容器的设置是管理成员的排列方式,也就是管理排列的方向和对齐的位置.成员的设置则是关于成员的大小和显示的位置(order). 弹性布局,弹性布局,自然要提现他的弹性,所谓弹性也就是对空间的分配.成员设置中的flex属性,就是对于额外空间的管理. flex可以设置三个值,第一个值必选,后两个可选. flex的第一个值 可以用flex-grow单独设置,代表含义是对额外空间的占据量,所谓额外空间就是这一行多余的空间,有多余的空间这一属性才有用.默认值是0,

flex布局以及相关属性

容器的属性: 父元素设置display:flex:子元素即可使用flex布局. flex-direction 决定项目排列方向: .box { flex-direction: row | row-reverse | column | column-reverse; } row(默认值):主轴为水平方向,起点在左端. row-reverse:主轴为水平方向,起点在右端. column:主轴为垂直方向,起点在上沿. column-reverse:主轴为垂直方向,起点在下沿. flex-wrap 一条

flex布局,一排,多排,项目属性

flex布局 阮一峰 display:flex;横排 行内元素也可以使用Flex布局. Webkit内核的浏览器,必须加上-webkit前缀. 注意,设为Flex布局以后,子元素的float.clear和vertical-align属性将失效. 容器默认存在两根轴: 水平的主轴(main axis)和垂直的交叉轴(cross axis). 主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end: 交叉轴的开始位置叫做cross start,结束位置叫做cross

Flex布局部分属性困惑解析

开始 最近研究一个框架,刚好里面也实现了flex布局的算法,虽然平时也用到flex做一些简单的布局,但是深入到算法实现的时候,发现自己对flex某些概念倒是没那么清晰,立马谷歌把几个flex涉及的属性都好好理清一下,权当一个自我梳理. main-axis和cross-axis main其实跟flex-direction这个属性相当有关系,关系如下图:根据flex-direction的值不同,main-axis方向相应也不同.既然有方向这个概念,这个时候justify-content属性(just

flex 布局

目前越来越多的浏览器都已经支持使用flex来,进行布局了.当然使用flex布局可以解决很多传统布局方式带来的问题,比如居中问题. 这里有阮一峰老师的中文教程: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool  语法篇 http://www.ruanyifeng.com/blog/2015/07/flex-examples.html?bsh_bid=683103006  实战篇 以及一篇英文文档

flex布局的使用,纪念第一次开发手机网站

一直专注于PC网站的开发,不曾接触手机网站,于今日机缘巧合也是公司业务需要,并在之前学习过flex的布局,于是一并实践.碰到的问题还是很多的,主要是谈谈flex布局. flex布局是css3里的内容,一种新的布局方式,也称之为 弹性布局,主要是为了取代 inline-bolck  和float 为总布局.当然,这两种布局还是有各自的优势的,毕竟存在就有他的理由. 历史进程是  box-->flexbox --> flex 由于是在谷歌调试,所以很理所当然的以为手机上的浏览器都是支持html5+