小虾米于2020年8月某日，习得视频中一段代码，引起对这部分的前端内容进行记录。
代码如下：
1 .container{ 2 top: 10px; 3 position: relative; 4 overflow: hidden; 5 6 } 7 8 .container .image-slider{ 9 display: flex; 10 overflow-x: scroll; 11 } 12 13 .container img{ 14 width: 100%; 15 height: 100%; 16 object-fit: cover; 17 } 18 19 .nav-section{ 20 position: absolute; 21 bottom: 0; 22 width: 100%; 23 opacity: .7; 24 color: #fff; 25 background-color: #333; 26 display: flex; 27 justify-content: flex-end; 28 align-items: stretch; 29 } 30 31 .nav-section span{ 32 display: flex; 33 margin: 0 5px; 34 width: 10px; 35 height: 10px; 36 background-color: #fff; 37 text-decoration: none; 38 border-radius: 50%; 39 }
其中HTML部分代码为：
1 <div class="container"> 2 <div class="image-slider" #ImgSlider> 3 <img [src]="item.imgUrl" [alt]="item.caption" [title]="item.caption" *ngFor="let item of sliders;let i = index"> 4 </div> 5 <div class="nav-section"> 6 <span class="slider-button" *ngFor="let item of sliders;let i = index"></span> 7 </div> 8 </div>
其中种种不必细说，只单拎出几个之前未曾使用到的武学盲点（知识点）：
有如下几个问题：
1..container中的 display：flex； 布局，其作用对象是.container本身的布局，还是作用于.container内部元素的布局
2.flex布局具体有哪些内容？
3.overflow-x属性有和作用？其类似的属性有哪些？
4.object-fit是何属性？有何作用？应当怎么使用？