ECOS百科全书|高级搜索|RSS订阅|加入收藏|服务中心|联系我们欢迎您光临!

flex布局

来源: 发布时间:2018-05-21 11:12 字体:【???? 点击次

nba新闻 www.p5vjo.com.cn Flex布局使用

.box{
    display:flex;
}


容器属性

    flex-direction

    flex-wrap

    flex-flow

    justify-content

    align-items

    align-content


1、flex-direction属性

    flex-direction属性决定内容排列

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}
  • row(默认值):主轴为水平方向,起点在左端。

  • row-reverse:主轴为水平方向,起点在右端。

  • column:主轴为垂直方向,起点在上沿。

  • column-reverse:主轴为垂直方向,起点在下沿。




2、flex-wrap属性

     内容在一条轴线上排列不了是否换行

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

nowrap(默认值):不换行。

wrap:换行,第一行在上方。

wrap-reverse:换行,第一行在下方。


3、justify-content属性

    定义内容在主轴上的对其方式

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}
  • flex-start(默认值):左对齐

  • flex-end:右对齐

  • center: 居中

  • space-between:两端对齐,项目之间的间隔都相等。

  • space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。



4、align-items属性

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}
  • flex-start:交叉轴的起点对齐。

  • flex-end:交叉轴的终点对齐。

  • center:交叉轴的中点对齐。

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

  • stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。



------分隔线--------

关键词:css3,flex布局,css

转载请保留://www.p5vjo.com.cn/html/jszx/article-2826.html

------分隔线--------
尚未注册畅言帐号,请到后台注册
  • 世界杯开幕 长春街头商家狂蹭热度 2019-02-22
  • 首趟辽宁援疆旅游专列907名游客进疆抵达沙湾县 2019-02-22
  • 太原35397名考生参加中考体测 2019-02-22
  • 自主创新确保北斗系统稳定运行 2019-02-21
  • 人民网评:汶川大地震十年,那些不能忘却的记忆 2019-02-21
  • 中国空港经济区成对外开放“门户” 空港城市加速布局 2019-02-21
  • 网络游戏“要发展”需重视青年权益 2019-02-20
  • “五毒月”禁忌应当学 竹林日记(0074) 2019-02-20
  • 《侏罗纪世界2》将上映 “星爵”透露:和恐龙的关系“情同父女” 2019-02-20
  • 甜点大危机!吃糖导致皮肤老化,了解一下? 2019-02-19
  • 海淀区西三旗街道:实施拆除清缘商厦违法建设 清退租住人员800余人 2019-02-19
  • 在第十二届全国人民代表大会第一次会议上的讲话 2019-02-18
  • 沃尔沃全新S60高性能版官图曝光 2019-02-18
  • 海南省农业厅与农发行携手合作 开产业扶贫“诸葛会”淘脱贫“金点子” 2019-02-17
  • 推动形成全面开放新格局 开启新时代开放新征程 2019-02-17
  • 146| 418| 734| 329| 376| 915| 110| 866| 684| 729|