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

------分隔线--------
尚未注册畅言帐号,请到后台注册
  • 湖州影视文化产业生机蓬勃 2018-12-12
  • 5G标准出炉!与4G有啥不一样? 或1秒内下载1G电影 2018-12-12
  • 靠啥为基层留住人才?( 民生视线·引导人才流动 助力均衡发展①) 2018-12-11
  • 101小姐姐杂志大片被曝抄袭 和韩女团twice动作一模一样 2018-12-11
  • 【理上网来喜迎十九大】欧洲科学院院士刘康美丽中国与生态文明 2018-12-11
  • 女性之声——全国妇联 2018-12-10
  • 周边景区邀你开心过节 2018-12-10
  • 政能亮政府服务,当好“店小二”而非“二大爷” 2018-12-10
  • 图解:6%人口极度贫困、18%儿童贫困,来看看美国当下的人权状况 2018-12-10
  • 女出纳侵吞千万公款扮富婆 7年未被公司发现 2018-12-09
  • 湖北“儿子娃娃”的医疗援疆路 2018-12-09
  • 太原网友:谁来管管逢雨必淹的山大附小周边 2018-12-09
  • 43m2三房两厅 小公寓抢刚需客 2018-12-08
  • 宝沃推全新纯电动SUV最高时速150km 2018-12-08
  • 【萍乡天气】最新萍乡今天天气,实时提供萍乡气温、空气质量、24小时天气预报、生活指数查询 2018-12-08
  • 539| 87| 995| 217| 320| 922| 937| 162| 209| 944|