Невозможно сделать контейнер flexbox отзывчивым

Question

Я работаю над учебным проектом, в котором у меня есть несколько карточек профилей, собранных вместе с помощью flexbox. Несмотря на то, что я изучал flexbox в течение нескольких дней, я все еще не мог сосредоточиться на том, чтобы сделать страницу адаптивной с помощью flexbox. Итак, у меня есть эта страница с 4 пунктами. Прямо сейчас предметы вроде как исправлены. Он не реагирует на размеры экрана. Но я хочу переместить элемент в следующую строку, если размер экрана небольшой, или переместить элемент в верхнюю строку, если размер экрана большой, но элементы остаются в центре всего контейнера (как показано на Codepen). В W3school есть что-то вроде этого:

https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_flex-wrap_wrap

Я пробовал это с flex-wrap: wrap;, но мои предметы не отвечают вообще. Вот кодекс и мой код:

https://codepen.io/zakero/pen/mdJazoP

HTML

<div class="team-area">
        <div class="team-container">


            <a href="#">
                <span class="single-img img-one">
                    <span class="img-text">
                        <div class="img-text-upper-container">
                            <div class="img-text-title">
                                <h4>John Doe</h4>
                            </div>

                            <div class="img-text-price">
                                <h4 class="price">Lorem</h4>
                                <h4 class="date">10 days ago</h4>
                            </div>
                        </div>

                        <div class="img-description">
                            <p>Lorem Ipsum dolor sit amet, consetssssgas...</p>
                        </div>

                        <div class="img-options-inner">
                            <div class="img-options reviews">
                                <h5>4.5 <i class="far fa-star"></i></h5>
                            </div>


                            <div class="img-options comments">
                                <h5>10 <i class="far fa-comments"></i></h5>
                            </div>

                        </div>

                    </span>
                </span>
            </a>



            <a href="#">
                <span class="single-img img-two">
                    <span class="img-text">
                        <div class="img-text-upper-container">
                            <div class="img-text-title">
                                <h4>Jane Doe</h4>
                            </div>

                            <div class="img-text-price">
                                <h4 class="price">Lorem</h4>
                                <h4 class="date">10 days ago</h4>
                            </div>
                        </div>

                        <div class="img-description">
                            <p>Lorem Ipsum dolor sit amet, consetssssgas...</p>
                        </div>

                        <div class="img-options-inner">
                            <div class="img-options reviews">
                                <h5>4.5 <i class="far fa-star"></i></h5>
                            </div>


                            <div class="img-options comments">
                                <h5>10 <i class="far fa-comments"></i></h5>
                            </div>

                        </div>
                    </span>
                </span>
            </a>



            <a href="#">
                <span class="single-img img-three">
                    <span class="img-text">
                        <div class="img-text-upper-container">
                            <div class="img-text-title">
                                <h4>Baby Doe</h4>
                            </div>

                            <div class="img-text-price">
                                <h4 class="price">Lorem</h4>
                                <h4 class="date">10 days ago</h4>
                            </div>
                        </div>

                        <div class="img-description">
                            <p>Lorem Ipsum dolor sit amet, consetssssgas...</p>
                        </div>
                        <div class="img-options-inner">
                            <div class="img-options reviews">
                                <h5>4.5 <i class="far fa-star"></i></h5>
                            </div>


                            <div class="img-options comments">
                                <h5>10 <i class="far fa-comments"></i></h5>
                            </div>

                        </div>
                    </span>
                </span>
            </a>



            <a href="#">
                <span class="single-img img-four">
                    <span class="img-text">
                        <div class="img-text-upper-container">
                            <div class="img-text-title">
                                <h4>Mr. Doe</h4>
                            </div>

                            <div class="img-text-price">
                                <h4 class="price">Lorem</h4>
                                <h4 class="date">10 days ago</h4>
                            </div>
                        </div>

                        <div class="img-description">
                            <p>Lorem Ipsum dolor sit amet, consetssssgas...</p>
                        </div>
                        <div class="img-options-inner">
                            <div class="img-options reviews">
                                <h5>4.5 <i class="far fa-star"></i></h5>
                            </div>


                            <div class="img-options comments">
                                <h5>10 <i class="far fa-comments"></i></h5>
                            </div>

                        </div>
                    </span>
                </span>
            </a>

        </div>
    </div>

CSS

@import url('https://fonts.googleapis.com/css?family=Caveat:400,700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700,800,900&display=swap');

body{
    background: #1D1E22;
}


a{
    text-decoration: none;
    color: #333;
}

.team-area{
    padding: 48px 0 0 0;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.team-container{
    width: 1100px;
    height: auto;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    flex-wrap: wrap;
}

.single-img{
    border-radius: 5px;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex-direction: column-reverse;
    flex-wrap: nowrap;
    width: 325px;
    height: 260px;
    box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    transform: translate(0, 0);
    transition: 0.3s;
    margin-bottom: 38px;
}

.single-img:hover{
    transform: translate(0, -9px);
}


.img-one{
  background: purple;
}

.img-two{
  background: green;
}

.img-three{
  background: blue;
}

.img-four{
  background: cyan;
}

.img-text {
    background: #fff;
    width: 100%;
    height: auto;
    position: relative;
    transform: translate(0, 68px);
    line-height: 10px;
    transition: 0.5s ease;
    display: inline-block;
}

.img-text-upper-container{
    width: 100%;
}

.img-text-title{
    float: left;
    width: 70%;
    padding-left: 0px;
}

.img-text-price{
    width: 30%;
    float: right;
}

.img-text-price h4 {
    line-height: 16px;
    padding: 0;
    margin: 14px 0 0px 11px;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
}

.img-text-price .date {
    line-height: 16px;
    padding: 0;
    margin: 0px 0 0px 11px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
}

.img-text-price h4 span{
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
}

.img-text .img-description {
    display: inline-block;
    width: 100%;
}

.img-text .img-description p {
    white-space: pre;
    text-align: center;
    font-weight: bold;
    font-family: 'Montserrat', sans-serif;
    margin: 22px 0 12px 0;
    font-size: 13px;
}

.img-text p i{
    padding-right: 20px;
}

.img-text-title h4 {
    line-height: 16px;
    padding: 0;
    margin: 14px 0 14px 12px;
    font-size: 30px;
    font-family: 'Caveat', cursive;
    font-weight: 700;
}

.img-text-title h5 {
    font-size: 13px;
    margin: 0;
    margin-top: -5px;
    margin-bottom: -12px;
    font-family: 'Montserrat', sans-serif;
    margin-left: 15px;
}

.single-img:hover .img-text{
    transform: translate(0, 0);
}

.img-options-inner{
    width: 100%;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    /*margin: 0 auto;*/
}

.img-options {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex-direction: column-reverse;
    flex-wrap: nowrap;
    width: 50%;
    overflow: hidden;
    align-items: center;
    font-size: 20px;
}

.img-options h5{
    width: 100%;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    margin: 10px 0 20px 0;
}

Answer 1

Вы не можете сделать это, потому что вы установили фиксированное значение div class="team-container".

. Удалите width для div с классом team-container. или, если вы хотите, чтобы он был максимальным, тогда поставьте max-width. это должно работать для вас

@import url('https://fonts.googleapis.com/css?family=Caveat:400,700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700,800,900&display=swap');

body{
	background: #1D1E22;
}


a{
	text-decoration: none;
	color: #333;
}

.team-area{
	padding: 48px 0 0 0;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.team-container{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	flex-direction: row;
	align-items: center;
	margin: 0 auto;
	flex-wrap: wrap;
  align-content:flex-start;
}
.tile {
  margin:20px;
}
.single-img{
	border-radius: 5px;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	flex-direction: column-reverse;
	flex-wrap: nowrap;
	width: 325px;
	height: 260px;
	box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.3);
	overflow: hidden;
	transform: translate(0, 0);
	transition: 0.3s;
	margin-bottom: 38px;
}

.single-img:hover{
	transform: translate(0, -9px);
}


.img-one{
  background: purple;
}

.img-two{
  background: green;
}

.img-three{
  background: blue;
}

.img-four{
  background: cyan;
}

.img-text {
    background: #fff;
    width: 100%;
    height: auto;
    position: relative;
    transform: translate(0, 68px);
    line-height: 10px;
    transition: 0.5s ease;
    display: inline-block;
}

.img-text-upper-container{
	width: 100%;
}

.img-text-title{
	float: left;
	width: 70%;
	padding-left: 0px;
}

.img-text-price{
	width: 30%;
	float: right;
}

.img-text-price h4 {
    line-height: 16px;
    padding: 0;
    margin: 14px 0 0px 11px;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
}

.img-text-price .date {
    line-height: 16px;
    padding: 0;
    margin: 0px 0 0px 11px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
}

.img-text-price h4 span{
    font-family: 'Montserrat', sans-serif;
	font-size: 14px;
}

.img-text .img-description {
    display: inline-block;
    width: 100%;
}

.img-text .img-description p {
    white-space: pre;
    text-align: center;
    font-weight: bold;
    font-family: 'Montserrat', sans-serif;
    margin: 22px 0 12px 0;
    font-size: 13px;
}

.img-text p i{
	padding-right: 20px;
}

.img-text-title h4 {
    line-height: 16px;
    padding: 0;
    margin: 14px 0 14px 12px;
    font-size: 30px;
    font-family: 'Caveat', cursive;
    font-weight: 700;
}

.img-text-title h5 {
    font-size: 13px;
    margin: 0;
    margin-top: -5px;
    margin-bottom: -12px;
    font-family: 'Montserrat', sans-serif;
    margin-left: 15px;
}

.single-img:hover .img-text{
	transform: translate(0, 0);
}

.img-options-inner{
    width: 100%;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    /*margin: 0 auto;*/
}

.img-options {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex-direction: column-reverse;
    flex-wrap: nowrap;
    width: 50%;
    overflow: hidden;
    align-items: center;
    font-size: 20px;
}

.img-options h5{
	width: 100%;
	text-align: center;
    font-family: 'Montserrat', sans-serif;
	margin: 10px 0 20px 0;
}

<div class="team-area">
		<div class="team-container">


			<a href="#" class="tile">
				<span class="single-img img-one">
					<span class="img-text">
						<div class="img-text-upper-container">
							<div class="img-text-title">
								<h4>John Doe</h4>
							</div>

							<div class="img-text-price">
								<h4 class="price">Lorem</h4>
								<h4 class="date">10 days ago</h4>
							</div>
						</div>
						
						<div class="img-description">
							<p>Lorem Ipsum dolor sit amet, consetssssgas...</p>
						</div>
						
						<div class="img-options-inner">
							<div class="img-options reviews">
								<h5>4.5 <i class="far fa-star"></i></h5>
							</div>


							<div class="img-options comments">
								<h5>10 <i class="far fa-comments"></i></h5>
							</div>

						</div>
						
					</span>
				</span>
			</a>



			<a href="#" class="tile">
				<span class="single-img img-two">
					<span class="img-text">
						<div class="img-text-upper-container">
							<div class="img-text-title">
								<h4>Jane Doe</h4>
							</div>

							<div class="img-text-price">
								<h4 class="price">Lorem</h4>
								<h4 class="date">10 days ago</h4>
							</div>
						</div>
						
						<div class="img-description">
							<p>Lorem Ipsum dolor sit amet, consetssssgas...</p>
						</div>

						<div class="img-options-inner">
							<div class="img-options reviews">
								<h5>4.5 <i class="far fa-star"></i></h5>
							</div>


							<div class="img-options comments">
								<h5>10 <i class="far fa-comments"></i></h5>
							</div>

						</div>
					</span>
				</span>
			</a>



			<a href="#" class="tile">
				<span class="single-img img-three">
					<span class="img-text">
						<div class="img-text-upper-container">
							<div class="img-text-title">
								<h4>Baby Doe</h4>
							</div>

							<div class="img-text-price">
								<h4 class="price">Lorem</h4>
								<h4 class="date">10 days ago</h4>
							</div>
						</div>
						
						<div class="img-description">
							<p>Lorem Ipsum dolor sit amet, consetssssgas...</p>
						</div>
						<div class="img-options-inner">
							<div class="img-options reviews">
								<h5>4.5 <i class="far fa-star"></i></h5>
							</div>


							<div class="img-options comments">
								<h5>10 <i class="far fa-comments"></i></h5>
							</div>

						</div>
					</span>
				</span>
			</a>



			<a href="#" class="tile">
				<span class="single-img img-four">
					<span class="img-text">
						<div class="img-text-upper-container">
							<div class="img-text-title">
								<h4>Mr. Doe</h4>
							</div>

							<div class="img-text-price">
								<h4 class="price">Lorem</h4>
								<h4 class="date">10 days ago</h4>
							</div>
						</div>
						
						<div class="img-description">
							<p>Lorem Ipsum dolor sit amet, consetssssgas...</p>
						</div>
						<div class="img-options-inner">
							<div class="img-options reviews">
								<h5>4.5 <i class="far fa-star"></i></h5>
							</div>


							<div class="img-options comments">
								<h5>10 <i class="far fa-comments"></i></h5>
							</div>

						</div>
					</span>
				</span>
			</a>

		</div>
	</div>