質問: 商品をliタグで綺麗に並べたい いつもお世話になっております。アイテムをliタグを使って3列に並べたいのですが、ボタンを2列で設置したとき、flexがうまく効いておらず縦がそろいません。ボタンの方でposition: relative;を利用しているのが原因だとは思うのですが、relativeを使わず、ボタンを2列に配置するのが難しく手詰まり状態です。何か解決策がございましたら、ご教示の程よろしくお願いいたします。【ソースコード】・htmlタイトルあああああああああああああああああああああああああああああああああああああああああああああああ 楽天市場で購入 paypayモールで購入 タイトルあああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ 楽天市場で購入 paypayモールで購入 タイトルあああああああああああああああああああああああああああああああああああああああああああああああ 楽天市場で購入 paypayモールで購入 ・css ul.item-list {width:1000px;max-width: 100%;margin:0px auto 20px;padding:0;display:flex;display:-webkit-box;display:-moz-box;display:-ms-box;display:-webkit-flexbox;display:-moz-flexbox;display:-ms-flexbox;display:-webkit-flex;display:-moz-flex;display:-ms-flex;-webkit-box-lines:multiple;-moz-box-lines:multiple;-webkit-flex-wrap:wrap;-moz-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap; text-align: center;justify-content: center;}.flex > *:first-child > *{ width:100%; }/* ul.item-list li:first-child{margin-right:4%;}*/ ul.item-list li {width:26.5%;background: #fff;list-style:none;padding:1.5% 1.5% 2%;margin:0 1.7% 20px;position: relative;} ul.item-list li.big {width:41.5%;padding:1.5% 2.2% 2%;} ul.item-list li img {width:100%;margin:0;padding:0;}@-moz-document url-prefix() { ul.item-list li img {width:100%;margin:0;padding:10px 0 0;}} ul.item-list li h4 {font-size:120%;word-break: break-all;text-align:center;margin:5px 0;padding:0;} ul.item-list li h4:before {font-size:120%;word-break: break-all;text-align:center;margin:5px 0;padding:0;}@media screen and (max-width:639px){ ul.item-list li h4 {font-size:95%;padding:0;margin:2% 0 0;}} ul.item-list li p {padding:0 0 25px;font-size:15px;line-height:160%;letter-spacing:normal;}@-moz-document url-prefix(){ ul.item-list li p {padding:0 5% 65px;}}@media screen and (max-width:639px){} ul.item-list li p.cart a {width:90.5%;background: #000;/* チェックボタンの色 */border-bottom:2px solid #619bc0;/* チェックボタンの下線色 */text-align:center;padding:8px 0;margin:0;position: absolute;bottom: 15px;color: #fff;/* チェックボタンの文字色 */font-size: 100%;} ul.item-list li p.cart a:hover {color: #fff;background:#036ecf;}@media screen and (max-width:639px){ ul.item-list {width:100%;margin:0 auto 0px;padding:0;} ul.item-list li {width:100%;list-style:none;padding-bottom:30px;margin:0 1% 15px;} ul.item-list li.big {width:90%;padding:1.5% 2.2% 5%;} ul.item-list li p { margin:0;padding:0 2% 5%;font-size:12px;} ul.item-list li p.cart a {width:92%;padding:8px 0;margin:0;position: absolute;bottom:2%;left:3%;font-size: 100%;}}.btn,a.btn,button.btn { font-size: 1rem; font-weight: 700; line-height: 1.5; bottom: 15px; position: relative; display: inline-block; padding: 1rem 4rem; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-transition: all 0.3s; transition: all 0.3s; text-align: center; vertical-align: middle; text-decoration: none; letter-spacing: 0.1em; color: #212529; border-radius: 0.5rem;}.btn-wrap-pc-sp { max-width: 435px; margin: 0 auto 20px;}a.btn-pc-sp { line-height: 1.4; width: 49.5%; padding: 1.25rem 0; color: #ffff;}a.btn--contact { display: block; padding: 1rem 0; color: #fff; background: #bf0000;}a.btn--contact i { font-size: 2rem;}a.btn--contact i.fa-position-left { font-size: 3rem; left: 2rem;}a.btn--contact :hover { color: #fff;}a.btn--tel { display: block; margin-top: 15px; padding: 1rem 0; color: #fff; background: #9a812e;}a.btn--tel i { font-size: 2rem;}a.btn--tel i.fa-position-left { font-size: 3rem; left: 2rem;}a.btn--tel .number { line-height: 1; display: inline-block; margin-top: 0.5rem; padding: 0.25rem 2rem; letter-spacing: 0; color: #094; border-radius: 0.5rem; background: #fff;}a.btn--tel:hover { color: #fff;}.fa-position-left { position: absolute; top: calc(50% - 0.5em); left: 1rem;}.fa-position-right { position: absolute; top: calc(50% - 0.5em); right: 1rem;}
回答: ありがとうございます!解決いたしました!