1. 親要素にflexプロパティの指定

.parent {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

2. 子要素同士の間の幅の半分の数をmarginに指定

.child {
  margin: 5px; //子要素同士の間の幅10pxの場合
}

3. 子要素 指定したmarginの倍の数をflex-basisから引く

.child {
  flex-basis: calc(50% - 10px); //1行に2個表示の場合
  flex-basis: calc(33.33% - 10px); //1行に3個表示の場合
  flex-basis: calc(25% - 10px); //1行に4個表示の場合
}

4. 親要素にマイナスmarginを指定

子要素のmargin分、幅が狭くなるので、親要素にマイナスmarginを指定。
両端とbottomはマイナス、topはプラス。

.parent {
  margin: 10px -10px -10px; //top left/right bottom
}

メモ1

justify-content: space-between;を指定＋子要素にmarginなしだと、最後の行の要素が端に寄る。
clearfixのcssが設定されているときに、divにafter要素が追加されていると、子要素の並びにafter要素が入るため。

justify-content: flex-start;を指定＋子要素にmargin設定＋flex-basisでcalcで指定する幅からmargin分引くと寄らない。

flexboxのjustify-contentでspace-betweenをすると、余った要素が両端によってしまうのを直したい

メモ2

子要素に画像があり画像の下に余分な空白ができる場合、font-size: 0を指定すると消える。

.child {
  font-size: 0;
}

メモ3

flexショートハンド（まとめて指定）のcalcはIEで効かないため、使用しない。flex-basisで指定。

.child {
  flex: 0 1 calc(50% - 10px); //IEで崩れる
  flex-basis: calc(50% - 10px); //IEでも崩れない
}

flexboxのバグに立ち向かう（flexboxバグまとめ）

メモ4

IEでカラム落ちするので、max-widthも同時に指定する。
IEではpaddingを指定しているとき、box-sizing: border-boxが効かない。

.child {
  flex-basis: 340px;
  max-width: 340px;
}

IE11でflex-basisの値にbox-sizing: border-boxが効かないバグ

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="jTruncSubstr.js"></script>
<script type="text/javascript">
  $().ready(function() {
    $('.comment').jTruncSubstr({
      length: 200,//表示させる文字数
      minTrail: 0,//省略文字の最低文字数
      moreText: "続きを読む",//非表示部分を表示するリンクの文字列
      lessText: "閉じる",//表示した後、再び非表示にするリンクの文字列
      ellipsisText: "...",//続きがあることを表示するための文字列
      moreAni: "fast",//表示時のアニメーション速度
      lessAni: "fast"//非表示時のアニメーション速度
    });
  });
</script>
<style>
  .comment .truncate_more_link {
    text-decoration: underline;
    color: #1242b2;
  }
</style>
<p class="comment">この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。</p>

1. jQueryの読み込み

https://developers.google.com/speed/libraries/#jquery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

2. jTruncSubstrスクリプトの読み込み

http://semooh.jp/jglycy/jquery-plugins/jtruncsubstrからjsファイルをダウンロードしてサーバーにアップ。

<script src="js/jTruncSubstr.js"></script>

3. クラスまたはID名で適用する箇所を指定

<script type="text/javascript">
  $().ready(function() {
    $('.comment').jTruncSubstr({
      length: 200,//表示させる文字数
      minTrail: 0,//省略文字の最低文字数
      moreText: "続きを読む",//非表示部分を表示するリンクの文字列
      lessText: "閉じる",//表示した後、再び非表示にするリンクの文字列
      ellipsisText: "...",//続きがあることを表示するための文字列
      moreAni: "fast",//表示時のアニメーション速度
      lessAni: "fast"//非表示時のアニメーション速度
    });
  });
</script>
<p class="comment">この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。</p>

4. スタイル指定

開閉リンクのクラス名：truncate_more_link

<style>
  .comment .truncate_more_link {
    text-decoration: underline;
    color: #1242b2;
  }
</style>

ちょうどいい文字数（font-size: 14pxの場合）

PC（幅1000px）：文字数210文字で3行分。
SP（幅355px）：95文字で4行分。

jTruncSubstr
アコーディオン表示の「続きを読む」が簡単に実装できるjQueryプラグイン『jTruncSubstr』

<script>
  $(function(){
    // #で始まるアンカーをクリックした場合に処理
    $('a[href^="#"]').not('.class').not('#id a').click(function() {
      // スクロールの速度
      var speed = 400; // ミリ秒
      // アンカーの値取得
      var href= $(this).attr("href");
      // 移動先を取得
      var target = $(href == "#" || href == "" ? 'html' : href);
      // 移動先を数値で取得
      var position = target.offset().top - 15;
      // スムーススクロール
      $('body,html').animate({scrollTop:position}, speed, 'swing');
      return false;
    });
  });
</script>

スムーススクロールのスクリプトでは#で始まるaタグの場合すべてスクロールが効いてしまう。

#だけのaタグの場合（アンカー先がない、モーダルや表示スクリプトなど）、ページトップ（#）へスクロールしてしまう。
ページトップへスクロールしてしまうのを止めたいとき、notで特定のタグを除外できる。

$('a[href^="#"]').not('.class').not('#id a').click(function() {

スムーススクロール（除外するものをnotに）
特定のリンクをスムーススクロールさせないように除外させる
[jQuery]特定のリンクを除外しつつページ内スクロール【2017/03/29追記】

abbr,address,article,aside,audio,b,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:top;background:0 0;box-sizing:border-box}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}nav ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:0 0}ins{background-color:#ff9;color:#000;text-decoration:none}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:700}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}ul{list-style:none}a{text-decoration:none;color:#000}

styles.scss

html {
  width: 100%;
  height: 100%;
  background: #fff;
  font-size: 62.5%;
}
body {
  width: 100%;
  position: relative;
  text-align: center;
  font-size: 1rem;
  font-weight: 300;
  color: #000;
  letter-spacing: 0;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: Arial, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic StdN", "Hiragino Sans", Meiryo, sans-serif;
}
header, main, section {
  display: block;
  width: 100%;
  margin: 0 auto;
  &::after {
    content: "";
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
  }
}
.bold {
  font-weight: 600;
}
a {
  color: #000;
  cursor: pointer;
  &:hover {
    opacity: 0.7;
    transition: all 0.5s ease;
  }
}

font-family: ヒラギノ

font-family: Arial, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic StdN", "Hiragino Sans", Meiryo, sans-serif;

font-family: 游ゴシック

font-family: Arial, "Yu Gothic Medium", YuGothic, sans-serif;

font-family: Noto Sans

font-family: 'Noto Sans JP', sans-serif;

https://swiperjs.com/api/

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js"></script>

<!-- Slider main container -->
<div class="swiper-container">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    ...
  </div>
  <!-- If we need pagination -->
  <div class="swiper-pagination"></div>
  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
  <!-- If we need scrollbar -->
  <div class="swiper-scrollbar"></div>
</div>

<script>
  var mySwiper = new Swiper('.swiper-container', {
    loop: true,
    loopAdditionalSlides: 3,
    autoplayDisableOnInteraction: false,
    slidesPerView: 1.5,
    spaceBetween: 30,
    centeredSlides: true,
    speed: 1000,
    autoplay: 3000,
    observer: true,
    observeParents: true,
    preventClicks: true,
    preventClicksPropagation: true,
    paginationClickable: true,
    pagination: '.swiper-pagination',
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev'
  })
</script>

ページネーション、アローのクリック後にオートプレーが止まるとき。
My swiper with Swiper.js stop autoplay after slide it with finger, why?
autoplaydisableOnInteraction: Set to false and autoplay will not be disabled after user interactions (swipes), it will be restarted every time after interaction.

autoplayDisableOnInteraction: false,

2ループ目以降の2個目のスライドが表示されないとき。
Slide disappear when using loop and centeredSlides
loopAdditionalSlides: Addition number of slides that will be cloned after creating of loop.

loopAdditionalSlides: 3,

レスポンシブで上手く表示されないとき。
Swiper slider not working unless page is resized
observer: Set to true to enable Mutation Observer on Swiper and its elements. In this case Swiper will be updated (reinitialized) each time if you change its style (like hide/show) or modify its child elements (like adding/removing slides).

observeParents: Set to true if you also need to watch Mutations for Swiper parent elements.

observer: true,
observeParents: true,

ページネーションのドットがクリックできないとき。
clickableClickable: If true then clicking on pagination button will cause transition to appropriate slide. Only for bullets pagination type.

paginationClickable: true,

スワイプ中にリンクがクリックされるのを防ぐ。
preventClicks: Set to true to prevent accidental unwanted clicks on links during swiping.

preventClicks: true,

preventClicksPropagation: Set to true to stop clicks event propagation on links during swiping.

preventClicksPropagation: true,

{
  "sass.enabled": false,
  "sourceComments": false,
  "path": {
    "css/*.scss": {
      "sass.enabled": true,
      "sass.options": {
        "includePaths": [],
        "sourceComments": false,
        "outputStyle": "nested"
      },
      "fonts.fontSize": "12px",
      "livedev.multibrowser": false,
      "mikaeljorhult.bracketsAutoprefixer.onChange": false,
      "brackets-minifier.on-save": false,
      "mikaeljorhult.bracketsAutoprefixer.enabled": false,
      "linting.collapsed": false
    }
  },
  "brackets-minifier.on-save-project": false,
  "brackets-minifier.js-project-minify": true,
  "brackets-minifier.css-project-minify": true,
  "brackets-minifier.js-custom-path": "",
  "brackets-minifier.css-custom-path": "",
  "brackets-minifier.project-exclude": "",
  "brackets-minifier.concat-js-filename": "",
  "brackets-minifier.concat-css-filename": "",
  "brackets-minifier.uglifyjs-options": "{}",
  "brackets-minifier.cleancss-options": "{}"
}

CSSソースコメントの削除。（ルートフォルダに設置）

brackets.json

"htmlhint.options": {
  "attr-lowercase": [
    "viewBox"
  ],
  "doctype-first": false
},

HTML Hintの忠告を消す。（C:\Users***\AppData\Roaming\Brackets）
The attribute name of [ *ngIf ] must be in lowercase
tagname-lowercase exceptions?