Свойства CSS: Как свойство flex-based указывает начальную длину гибкого элемента?

Последнее обновление: 01 декабря 2018 10:52:03 (UTC / GMT +8 часов)

script1adsense2code

script1adsense3code

Решение:

HTML-код:

<!DOCTYPE html>
<html>
<head>
<title>How to flex-basis property specifies the initial length of a flexible item</title>
<style type="text/css">
 #w3r {
 width: 400px;
 height: 100px;
 border: 1px solid #3300FF;
 display: -webkit-flex;
 display: flex;
}
#w3r div {
 -webkit-flex-grow: 0;
 -webkit-flex-shrink: 0; 
 -webkit-flex-basis: 40px; 
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 40px;
}
#w3r div:nth-of-type(2) {
    -webkit-flex-basis: 80px;
    flex-basis: 80px;
}
</style>
</head>
<body>
<p><strong>w3resource Tutorial</strong></p>
<div id="w3r">
<div style="background-color:#00FF00;">HTML5</div>
<div style="background-color:#3333FF;">CSS</div>
<div style="background-color:#FF6600;">PHP</div>
<div style="background-color:#FF3399;">SQL</div>
<div style="background-color:#FFCC33;">MYSQL</div>
<div style="background-color:#CCFFFF;">w3resource Exercises, Practice with solution.</div>
</body>
</html>

Демонстрация в реальном времени:

Посмотрите перо flex- based -answer от w3resource ( @ w3resource ) в CodePen .

Посмотреть решение в браузере

Поддерживаемый браузер