JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<p>display:table</p>
<ul class="tab01">
  <li>abcdeabcdeabcde</li>
  <li>abcdeabcde</li>
  <li>abcde</li>
  <li>abcde</li>
</ul>

<p>display:flex</p>
<ul class="tab02">
  <li>abcdeabcdeabcdeabcde</li>
  <li>가나다라가나다라가나다라가나다라가나다라가나다라가나다라</li>
  <li>abcde</li>
  <li>abcde</li>
</ul>

<p>display:grid</p>
<ul class="tab03">
  <li>abcdeabcdeabcdeabcde</li>
  <li>가나다라가나다라가나다라가나다라가나다라가나다라가나다라</li>
  <li>abcde</li>
  <li>abcde</li>
</ul>

CSS

* {
  list-style-type:none;
  margin:0;
  padding:0;
}

ul {
  margin:20px 0;
  background:#eee;
  word-wrap:break-word;
}
ul li {
  border:1px solid #333;
  padding:5px;
}
.tab01 {
  display:table;
  table-layout:fixed;
  width:100%;
}
.tab01 li {
  display:table-cell;
  text-align:center;
  vertical-align:middle;
}
.tab02 {
  min-height:30px;
  text-align:center;
  word-break:break-all;
  display:flex;
  align-content: stretch;
}
.tab02 li {
  min-width: 0;
  display:flex;
  flex: 1;
  justify-content: center;
  align-items: center;
}

.tab03 {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(50px,1fr));
  
}
.tab03 li {
  
}