CSS Flex 的用途详解-木庄网络博客

本文摘自PHP中文网，作者Guanhui，侵删。

一、可以利用flex来布局一个p在另一个p里面水平垂直居中

如：html代码：　

<p class="container">
    <p class="box">
 
    </p>
    </p>

css代码：

.container{
    width:600px;
    height:400px;
    border:1px solid blue;
    display: flex;
    justify-content:center;
    align-items:center;
    }
    .box{
    width:200px;
    height:100px;
    border:1px red solid;

ps:这样就可以水平垂直居中咯

二、flex的属性

<p class="items">
    <p class="item">1</p>
    <p class="item">23</p>
    <p class="item">4</p>
    </p>

可以写在items上的属性有六个：

?flex-direction
?flex-wrap
?flex-flow
?justify-content
?align-items
?align-content

可以写在item上的有6个：

?order//这个就是item单独给了,要是想让那个item调换顺序就给这个属性给那个item
?flex-grow
?flex-shrink
?flex-basis
?flex
?align-self

以上就是CSS Flex 的用途详解的详细内容，更多文章请关注木庄网络博客！

相关阅读 >>

什么是css伪类

css怎么设置浮动

如何使用css来画一个棒棒糖

如何在css中实现并排生成多行的dt和dd

css怎么设置图片不平铺

css font-weight属性怎么用

css怎样让图片居中

css文字颜色渐变的三种实现方式（附代码）

css border-left-width属性怎么用

css fixed是什么意思

更多相关阅读请进入《Flex》频道 >>

书籍

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

￥83.86元 人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者

转载请注明出处：木庄网络博客 » CSS Flex 的用途详解

CSS Flex 的用途详解

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

相关推荐

评论