CSS中flexbox的使用方法

　　介绍

小编给大家分享一下CSS中flexbox的使用方法,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!

flexbox(灵活框布局模块)通过对父元素编写简单指令,可以对多个子元素进行各种各样的布局的调整。

CSS中flexbox的使用方法

将flexbox设置为父元素,这是非常重要的一个点。首先输入要应用的项目的父元素,如下所示。

显示:flex;

要应用于内联元素,请输入以下内容。

显示:inline-flex;

写入这个的元素将自动成为“flex容器”,其子元素将为“flexbox”,这样就使flexbox属性可用。我们来写一些典型的属性。

<强> flex-direction的使用

flex-direction是可以指定内容的排列方式的属性。

我们来创建以下的HTML和CSS,更改CSS中flex-direction的值

HTML代码

& lt; !DOCTYPE html> 　　& lt; html> 　　& lt; head> 　　& lt;元charset=皍tf-8"祝辞 　　& lt;链接rel=皊tylesheet"类型=拔谋?css"href=https://www.yisu.com/zixun/" style.css "> 　　头 　　身体<> 　　
　　
　　1 　　
　　
　　2 　　
　　
　　3. 　　
　　
　　4 　　
　　
　　5 　　
　　
　　 　　

CSS代码

风格。css 

 .menu {
　　显示:flex;
　　flex-direction:行;
　　}
　　.item {
　　text-align:中心;
　　宽度:50 px;
　　高度:20 px;
　　填充:3%;
　　利润率:3%;
　　background - color: # c97796;
　　颜色:白色;
　　}

当flex-direction设置为行时是水平显示的,效果如下

CSS中flexbox的使用方法

当flex-direction设置为列时是垂直显示的,效果如下

CSS中flexbox的使用方法

<强> flex-wrap的使用

flex-wrap属性用于指定弹性盒子的子元素换行方式。

我们来看具体的示例

HTML代码与上述例子相同

CSS代码

风格。css 

 
 
 flex-wrap的值设置为包装时,效果如下
 
  CSS中flexbox的使用方法 
 
 flex-wrap的值设置为wrap-reverse时,效果如下
 
  CSS中flexbox的使用方法 
 
 <强> justify-content的使用 
 
 justify-content是指定内容的位置的属性。
 
同样的,我们来设置justify-content的各个值
 
 HTML代码与上述都相同
 
 
 CSS代码
 
风格。css 
 
 
 
 justify-content的值设置为flex-end 
 
 
 
  CSS中flexbox的使用方法 
 
 justify-content的值设置为中心时,居中对齐
 
  CSS中flexbox的使用方法 
 
以上是CSS中flexbox的使用方法的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注行业资讯频道! 
CSS中flexbox的使用方法