Hatena Blog Tags
はてなブログ トップ
Flexbox
このタグでブログを書く
言葉の解説
ネットで話題
関連ブログ

Flexbox

このタグの解説についてこの解説文は、すでに終了したサービス「はてなキーワード」内で有志のユーザーが作成・編集した内容に基づいています。その正確性や網羅性をはてなが保証するものではありません。問題のある記述を発見した場合には、お問い合わせフォームよりご連絡ください。
dorapon2000’s diary•2ヶ月前

左右を固定幅の要素に挟まれた可変幅の要素の長い文字列を省略したい

この記事は巷であふれている「flex: 1; + text-overflow: ellipsis; の組み合わせが罠だから min-width: 0; をつけよ」という記事になります。 それを知った今検索すると、嫌でも目に付く内容なのですが、実装しているときはまったく気づくことができず沼っていました。 作りたい対象をタイトルにして、自分も記録に残します。 この記事中のソースコードは GitHub にあげています。 github.com 実現したい UI 最終的なコード <!-- index.html --> <div class="element"> <div class="left-cont…

#CSS#Flexbox

関連ブログ

主婦のスキマ学び日記•7ヶ月前

Webレイアウトに使う「float」「flexbox」「grid」の違い

WEB制作の学習中でflexboxがよく分からない…floatとの違いは何？grid難しい！ そうなっていませんか？私も難しいと感じたので、色々調べました。 この記事ではこの3つのWEBレイアウトに使用する手法の違いについてまとめています。 float: 文章の回り込み用 flexbox: 1次元のレイアウトに最適 grid: 2次元のレイアウトに最適 まとめ float: 文章の回り込み用 「float」は、元々テキストの回り込みを作るために作られたプロパティです。画像をテキストの左側や右側に配置するような用途が得意ですが、レイアウト全体に使うのは少し難しいです。 主に回り込み（文章と画像を…

#プログラミング#float#grid
Zenet Tech Blog•1年前

初心者でも簡単に横並び！flexboxでHTMLブロック要素の配置

はじめに 解決方法 中央寄せ 左寄せ 右寄せ 活用編 おわりに 参考記事 はじめに 皆様、はじめまして。株式会社ゼネットの方です。 新人研修の中で、HTMLレイアウトの横並びに苦戦しましたが、その解決方法について簡単にご紹介いたします。 この記事が皆様のお役に立てれば幸いです。 環境：Eclipse 2018 Windows 64bit 解決方法 （結論）私も以前、floatやinline-blockなどさまざまな方法を試しましたが、最終的にはflexboxを使うことで問題を解決しました。 flexboxを使うことで、親要素と子要素の関係を理解しやすく、コードもシンプルになります。また、fle…

#HTML5#Flexbox
テコテック開発者ブログ•2年前

【CSS】Flexboxをマスターしよう！

本投稿は TECOTEC Advent Calendar 2023 の6日目の記事です。 はじめに こんにちは。決済認証システム開発事業部の平沢です。 フロントエンドエンジニアとして、業務に携わっているのですがCSSって奥が深いな...🤔と思う機会が多いので、数あるプロパティの中からFlexboxに焦点をあてて執筆したいと思います。 目次 はじめに Flexboxとは？ Flexboxのメリット Flexboxのデメリット Flexboxの使い方 主要なプロパティ 覚えておきたいプロパティ おわりに 参考 テコテックの採用活動について

#CSS#Flexbox#レスポンシブデザイン
漂うマークアップエンジニア•3年前

オジサン、CSSで要素を横並びにする方法について色々と考察する

HTMLコーダー諸兄は要素の横並びをCSSでスタイリングする場合、どうされているだろうか。 フロート？フレックスボックス？グリッド？ 今年でIE11のサポートが終了し、よりモダンなCSSで案件対応ができるようになった2022年、改めて要素を横並びにする方法について考察してみたい。 ちなみにオジサンがHTMLコーダード新人の頃はtableタグを使う方法が主流であった。SEO対策でサマリー属性にキーワード仕込んだり、余白調整で透明gif画像を使ったりしていたのである。メルマガ等では最近まで使われていたようだ。閑話休題。 さて、以下のデザインカンプを見ていただきたい。 デザインカンプと呼べるかどうか…

#HTMLコーディング#CSS#HTMLコーディング初心者
フリーランス　技術調査ブログ•4年前

tailwindcssのflexboxのレイアウトを触ってみる

参考ページ tailwindcss.com 記事一覧を作ってみる <section class="mt-16"> <h2 class="text-center mt-8 mb-8">記事一覧</h2> <div class="flex justify-center space-x-16 ml-4 mr-4"> <div class="w-1/4 border"> <img src="image1.jpg" class="w-96"> <h3 class="p-2 text-center">タイトル</h3> <p class="p-4">ここに文章が入ります。ここに文章が入ります。ここに文章が…

#tailwindcss
たけるのプログラミング•4年前

GitHub Pagesを使ってみた！

結構前にherokuを使ったことがあり、同じことができるサービスないかなとネットをみていたら「GitHub Pages」というサービスがあったので使ってみました。無料で静的サイトを公開することができ、JavaScriptも動作するようです。自分ははてなブログに来る前、独自ドメイン&レンタルサーバーでサイトを運営していたので、このサービスが無料であることが驚きです。 作ったサイト shota232423.github.ioNBAオタクの私が、オススメのNBAプレイヤーを紹介しているサイトです。CSSのFlexboxが便利すぎました。 webdesign-trends.net 使い方で参考になるサ…

#GitHub Pages
フリーランス　技術調査ブログ•5年前

FlexboxのResponsive

はじめに 前回、Flexboxを覚えたのでflexboxを利用したレスポンシブができないか試してみる。 px-wing.hatenablog.com コード ブラウザのサイズが800px以下の場合、flexboxを縦にして、800px以上の場合、横にするコードを作成してみました。 <!DOCTYPE html> <html> <head> <style> .flex-container { display: flex; flex-direction: row; font-size: 30px; text-align: center; } .flex-item-left { background…

フリーランス　技術調査ブログ•5年前

CSSのFlex boxを利用したときのメモ

はじめに CSSのFlex boxを利用する機会があったので、覚えたものをメモしたことをまとめてみた。 サポートブラウザ 属性 Chrome IE Firefox Safari opera flex 29.021.0 -webkit- 11.010.0 -ms- 28.018.0 -moz- 9.06.1 -webkit- 17 Flex box 属性 プロパティ 説明 display HTML要素に使用されるボックスのタイプを指定します flex-direction フレックスコンテナ内のフレキシブルアイテムの方向を指定します justify-content アイテムが主軸の使用可能なスペー…

#CSS#Flexbox
パケット畑でつかまえて•5年前

CSSで要素２つを縦並びにしつつ中央寄せする方法とFlexbox微入門😾

HTMLのブロック要素２つを縦並びにして中央に配置するというスタイリングをCSSでする必要があったため、それを実現するまでに調べた事を自分用にまとめます。 "縦並びにして中央に配置(中央寄せ)する"とは下図を指します。(大雑把です) ようするにどうすればいいか 今回はFlexboxを使用しました。

#CSS