Как сделать чтобы flex элемент не растягивался?

Question

[Даниил Сухих]

Как сделать чтобы кнопка "Полный список цен", не расстигивалась на всю ширину?

<section id="block-two" class="default-section js-section">
	    	<h2 class="name-section">Основной список <span class="bold">услуг</span> предоставляемых нами</h2>
	    	<div class="shop-wrapper">
	    		<div class="shop-item">
	    			<img src="images/shop_1.svg">
	    			<h3>Дезинсекция</h3>
	    			<p>уничтожение насекомых</p>
	    			<div class="shop-item__price">Цена от: <span>2500 ₽</span></div>
	    		</div>
	    		<div class="shop-item">
	    			<img src="images/shop_3.svg">
	    			<h3>Дератизация</h3>
	    			<p>уничтожение грызунов</p>
	    			<div class="shop-item__price">Цена от: <span>2500 ₽</span></div>
	    		</div>
	    		<div class="shop-item">
	    			<img src="images/shop_2.svg">
	    			<h3>Дезинфекция</h3>
	    			<p>уничтожение бактерий</p>
	    			<div class="shop-item__price">Цена от: <span>3000 ₽</span></div>
	    		</div>
	    		<div class="shop-item">
	    			<img src="images/shop_4.svg">
	    			<h3>Дезодорация</h3>
	    			<p>устранение запахов</p>
	    			<div class="shop-item__price">Цена от: <span>2500 ₽</span></div>
	    		</div>
	    	</div>
	    	<a class="shop-all__button" href="#">ПОЛНЫЙ СПИСОК ЦЕН</a>
	    </section>

.default-section {
	box-sizing: border-box;
	padding: 50px 30px;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
}

.default-section > *:nth-child(2) {
	flex-grow: 2;
}
.shop-wrapper {
	display: flex;
	justify-content: space-around;
	align-items: center;
}

.shop-item {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.shop-item img {
	width: 150px;
	margin-bottom: 15px;
}

.shop-item h3 {
	margin-bottom: 10px;
}

.shop-item__price {
	font-weight: 500;
}

.shop-item__price span {
	font-weight: bold;
}

.shop-all__button {
	text-decoration: none;
	color: #fff;
	font-weight: bold;
	background: #2d95bd;
	display: block;
}

Answer 1

[Арсений Матыцин]

1. Вынести «полный список цен» из флекс-обертки.
2. Задать ссылке justify-self: flex-start.

ЗЫ: да и в принципе нет смысле использовать flex column для обертки. Выстраиваться один под одним элементы из коробки умеют.

Comments

[Даниил Сухих]

Самый удобный способ, только не
justify-self
а
align-self