学习关于display ：flex 布局问题！

番茄西红柿发布于2019-04-23 13:27 / 1371人阅读

摘要：什么是呢答是的缩写，意为弹性布局这个东西的引入，为盒模型提供了最大的灵活性可以相应式的实现各种页面的布局。基本概念采用布局的元素，称为容器，简称容器。在这个容器中默认存在两个轴水平方向的主轴和垂直方向上的交叉轴。

很多人不明白这个display:flex是到底是什么东西，如何使用的。

1.什么是display：flex呢？

答：flex是 flexible box的缩写，意为弹性布局；这个东西的引入，为盒模型提供了最大的灵活性！可以相应式的实现各种页面的布局。

基本概念

采用flex布局的元素，称为flex容器(flex container)，简称容器。在这个容器中默认存在两个轴：水平方向的主轴（main axis）和垂直方向上的交叉轴（cross axis）。

图：（摘自：他人博客）

以下6个属性设置在容器上：

- flex-direction 容器项目的排列方向（默认是横向排列）
- flex-wrap 容器内项目的换行方式
- flex-flow flex-direction 和 flex-wrap 属性的复合属性。
- justify-content 项目在主轴上对齐样式
- align-item　　项目在交叉轴上如何对齐
- align-content 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

注意： 如果元素不是弹性盒对象的元素，则flex-flow 属性是不起作用的；

属性值

用法

DOCTYPE html>
DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Titletitle>
    <style>
        .father {
            width: 500px;
            height: 100px;
            background-color: red;
            display: flex;
            flex-flow:row;
        }

        .box1 {
            flex: 3;
            background: blue;

        }
        .box2{
            flex: 2;
            background: pink;
        }
    style>
head>

<body>
    <div class="father">
        <div class="box1">div>
        <div class="box2">div>
    div>
body>

html>

以上仅是我个人初步学习！后期学习在进行更新! ~~~~~~~~~~~

GPU云服务器云服务器关于深度学习方面的问题 flex布局布局问题布局遇到的问题

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1898.html

关于某题左列定宽右列宽度自适应布局的学习

摘要：今天群里有人做题发了一道题由于最近在学习布局就不禁研究了起来题目如下已知结构如下以下哪些可以实现左列定宽右列宽度自适应的布局左列右列选项选项选项选项全部都试过一边了首先是左列定宽的条件这个条件在平时看其实都似乎没什么问题起码在我们大屏时看起今天群里有人做题发了一道题,由于最近在学习flex布局,就不禁研究了起来...题目如下: 已知HTML结构如下,以下哪些CSS可以实现左列定宽(...

adam1q84 2019-08-29 11:18 评论0 收藏0
微信小程序之scroll-view的flex布局问题

摘要：关于微信小程序的组件，第一次写的时候是直接在中用了一层容器包裹子元素，然后用了布局，并且是用了组件来实现的横向滚动，后面有提出改进，但是不记录下，就发现过了几天，就有点懵了效果图在里加一层容器，使用布局实现这里用布局实现的话，就要用组关于微信小程序的scroll-view组件，第一次写的时候是直接在scroll-view中用了一层容器包裹子元素，然后用了flex布局，并且是用了组件来...

nihao 2019-08-23 14:43 评论0 收藏0
移动端网站开发前端学习总结

摘要：关于适配宋体移动端适配可以使用宋体宋体也可配合百分比宽度一起使用宋体宋体十分适用于适配默认为以为单位。1.关于适配: 移动端适配可以使用lib-flexible（也可配合百分比宽度一起使用）十分适用于webapp适配 Font-size默认为12px 以rem为单位。关于lib-flexible详解：http://www.w3cplus.com/mobile/lib-flexible-fo...

番茄西红柿 2019-04-23 11:53 评论0 收藏0
CSS Conf -《新时代CSS布局》学习总结

摘要：分享嘉宾简介新时代布局的分享者是新加坡的国际知名专家陈慧晶。陈慧晶老师的分享主题介绍如下布局经常是令前端开发者头痛的一块工作。布局系统在这一小节中，慧晶老师主要分享了跟这新时代布局的三大栋梁。的首个公开工作草案是在发布的，而的则是发布。作者：陈大鱼头 github： KRISACHAN 记录原因：2019年3月30日在深圳举行了第五届的CSS Conf，鱼头作为一枚CSS新手以及爱好者也...

番茄西红柿 2019-05-23 15:55 评论0 收藏0
CSS Conf -《新时代CSS布局》学习总结

摘要：分享嘉宾简介新时代布局的分享者是新加坡的国际知名专家陈慧晶。陈慧晶老师的分享主题介绍如下布局经常是令前端开发者头痛的一块工作。布局系统在这一小节中，慧晶老师主要分享了跟这新时代布局的三大栋梁。的首个公开工作草案是在发布的，而的则是发布。作者：陈大鱼头 github： KRISACHAN 记录原因：2019年3月30日在深圳举行了第五届的CSS Conf，鱼头作为一枚CSS新手以及爱好者也...

libxd 2019-05-23 11:56 评论0 收藏0