默认是左向右排列

<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;
}

之前的代码，强制一行就被挤压了。如下图：

实际上超过宽非常长了。并没有使用... 表示。 弹性盒子使用上面的代码最好。

align-items 属性的使用【重要】

align-content 属性的使用【重要】

flex 和 margin组合

margin居中 上下居中。

.f{
    display: flex;
    /*上下居中*/
    align-items: center;
    /*左右居中*/
    justify-content: center;
    width: 500px;
    height: 500px;
    border: 1px deeppink solid;
}
.item_f{
    width: 50px;
    height: 50px;
    background-color: deeppink;
    border: 1px sandybrown solid;
}
<div class="f">
    <div class="item_f"></div>
</div>


这是让item居中的方法。
我们可以去掉，
/*上下居中*/
 align-items: center;
/*左右居中*/ justify-content: center;
    

    
给item_f添加
margin:auto 这样也可以居中。

如果使用了margin-left = auto 它会吃掉左边，自己占右边。

如果给绿色加margin-left-auto   他会带紫色也走。

给绿色加一个 margin:0 auto 那么 就是这个效果。

如果给紫色加个 margin-left : auto  

.f{
    display: flex;
    width: 600px;
    height: 500px;
    border: 1px deeppink solid;
    align-content:flex-start;
    flex-wrap: wrap;
}
.f .item{
    /*--n:4;*/
    /*--rest:calc(100% - var(--n) * 50px);*/
    /*margin: 10px calc(var(--rest)/var(--n) / 2 );*/  计算 margin 左右的空间。
}
.item_f{
    width: 50px;
    height: 50px;
    background-color: deeppink;
    border: 1px sandybrown solid;
}
.item_f2{
    width: 50px;
    height: 50px;
    background-color: #2a63a8;
    border: 1px sandybrown solid;
}
.item_f3{
    width: 50px;
    height: 50px;
    background-color: #1db617;
    border: 1px sandybrown solid;
}
.item_f4{
    width: 50px;
    height: 50px;
    background-color: #ed4eff;
    border: 1px sandybrown solid;
}



<div class="f"  >
    <div class="item item_f"></div>
    <div class="item item_f2"></div>
    <div class="item item_f3"></div>
    <div class="item item_f4"></div>
    <div class="item item_f"></div>
    <div class="item item_f2"></div>
    <div class="item item_f3"></div>
    <div class="item item_f4"></div>
    <div class="item item_f"></div>
    <div class="item item_f2"></div>
    <div class="item item_f3"></div>
    <div class="item item_f4"></div>
    <div class="item item_f"></div>
    <div class="item item_f2"></div>
    <div class="item item_f3"></div>
    <div class="item item_f4"></div>
</div>

• flex-wrap: wrap;：这个属性定义了当弹性容器内的空间不足以在一行内显示所有弹性项时，弹性项应该如何换行。wrap 值的意思是，当空间不足时，弹性项将自动换行到下一行显示，而不是挤在一起或溢出父容器。

变成这种效果、 把上面的注解去掉。使用哪个css就行了。

弹性盒均分布局

<div style="display: flex; height: 500px; width: 500px;">

    <div style="flex-grow: 1; background-color: #00a2d4;">
        23424
        324
        32
        4
    </div>
    <div style="flex-grow: 1;background-color: #cccc77;"></div>
    <div style="flex-grow: 1;background-color: #0000cc;"></div>

</div>

加上basis:0 就行了。 这是说让他们的初始宽是0  如果不这样设置，第1个里面有内容他的宽就不是0  所以1比2 3要宽。 因为他们是平分剩余的宽

1里面有字，他的宽并不是0,  2和3里面没有字，他的宽是0. 所以会造成大小不一样。

<div style="flex-grow: 1; flex-basis: 0; background-color: #00a2d4;">
    23424
    324
    32
    4
</div>
<div style="flex-grow: 1; flex-basis: 0;background-color: #cccc77;"></div>
<div style="flex-grow: 1;flex-basis: 0;background-color: #0000cc;"></div>