关于css3 属性 CSS3中弹性盒子Flex使用详解

管理员 2019-07-19 15:43

默认是左向右排列

<div style="overflow: hidden; padding: 10px 10px 10px 10px;  display: flex;display: -webkit-flex;">
	<div style="overflow: hidden;float: left; width: 50px;">
		<img style="width: 50px;" alt="" src="/static/images/base/fail_cra.png" />
	</div>
	<div style="overflow: hidden; flex:1;-webkit-flex:1;">很遗憾，你的成绩没有达到幸运抽奖的条件，继续努力。</div>
</div>

1、flex-direction属性决定主轴的方向（即项目的排列方向）

flex-direction: row | row-reverse | column | column-reverse;1

四个值分别代表：

- row（默认值）：主轴为水平方向，起点在左端。

- row-reverse：主轴为水平方向，起点在右端。

- column：主轴为垂直方向，起点在上沿。

- column-reverse：主轴为垂直方向，起点在下沿。

display: flex;

justify-content: flex-start;

align-items: center; 上下居中的意思。

综合起来，这三行代码将元素设置为使用flexbox布局，子元素将从容器的起始位置开始排列，并在侧轴上居中对齐。这样的设置使得子元素在父容器中以灵活的方式进行排列和对齐，适应不同的布局需求。

这个放大镜和文字这样属性代码如下：

.top_bar {
    width: 100%;
    display: flex;
    height: 80rpx;
    margin: 24rpx 0;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    border-radius: 8rpx;
    padding:15rpx;
}

.search_fixed {
    position: absolute;
    top: 100rpx;
    z-index: 9999;
}

.search {
    width: 100%;
    padding: 16rpx 0;
    background-color: #fff;
    border: 1px solid #f0f0f0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 32rpx;
    border-radius: 16rpx;
    font-weight: 400;
    /* background-color: aqua; */
}

.search image {
    width: 50rpx;
    height: 50rpx;
    margin: 0 20rpx;
}


 <view class="top_bar">
            <view class="search" bindtap="to_search">
                <image src="/assets/images/search1.png" mode="aspectFit" />
                <text>请输入关键词</text>
            </view>
        </view>

display: flex;

justify-content: space-between;

这是什么意思？当容器内有多个项目时，项目之间的水平对齐方式。

space-between 的意思是让项目在容器中平均分布，同时两端项目与容器的边缘之间的距离是相等的，也就是说，第一个项目位于容器的起始位置，最后一个项目位于容器的结束位置，而剩下的项目则平均分布在剩下的空间中。

1个在最左边 1个在最右边。

    width: 24px;
    height: 24px;
    display: flex;
    align-items: center; 上下居中
    justify-content: center; 左右居中
    效果如下

弹性盒子建议使用这个布局因为之前的布局会被挤压掉。

.list {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0px, 1fr));
    gap: 24px;
}
.item {
    height: 350px;
    background-color: #1cbbb4;
    overflow-y: auto;
}
.row {
    display: flex;
    align-items: center;
   
}
.row .left {
    width: 88rpx;
   
}
.right {
    position: relative;
    display: inline-block;
    width: 100%;
}


<view class="list">
    <view class="item">
        <view class="row">
            <span class="left">33</span>
            <span class="right">九十年代的上海处处是机遇与希望。青年阿宝(胡歌 饰)凭借改革开放的春风和自己的打拼跻身成为商界后起之秀,黄河路上无人不晓。平凡阿宝蜕变为宝总,离不开高人爷叔与夜东京老板玲</span>
        </view>
    </view>
    <view class="item">34</view>
</view>

强制一行，超出的部分使用....

.right{
    position: relative;
    display: inline-block;
    width: 100%;
    transition: all .3s;
    background-color: #00a2d4;
    
    
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}